/* Layout refinements */
.legend { display: none !important; }

.finish-bar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  margin: 0 !important;
}

.question-strip {
  margin-top: 0.25rem !important;
  margin-bottom: 1rem !important;
  padding-top: 0 !important;
  gap: 0.35rem !important;
}

.qnav-btn {
  min-width: 2rem !important;
  height: 2rem !important;
  padding: 0.2rem 0.45rem !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

.quiz-head h2 {
  margin-bottom: 0.15rem !important;
}

.progress-wrap {
  align-self: flex-start !important;
}

.progress {
  font-size: 0.95rem !important;
}

.question-text {
  white-space: pre-wrap;
  font-size: 1.15rem !important;
  line-height: 1.5 !important;
  margin: 0.25rem auto 1rem !important;
  text-align: center;
  max-width: 1000px;
  font-weight: 500;
}

.written-method {
  white-space: pre-wrap !important;
  font-family: "Consolas", "Lucida Console", "Courier New", monospace !important;
  font-variant-numeric: tabular-nums;
  font-size: 2rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  text-align: right !important;
  display: block !important;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1rem auto !important;
}

.wm-row {
  text-align: right;
  width: 100%;
  min-width: 7ch;
}

.panel {
  padding-bottom: 6rem !important;
}

.standalone-answer-input,
.text-answer-input {
  font-size: 1.1rem !important;
}

@media (min-width: 900px) {
  .panel {
    max-width: 1100px !important;
  }

  .written-method {
    font-size: 2.2rem !important;
  }
}

.remainder-help {
  text-align: center;
  margin: 10px 0 16px;
}

.remainder-help-box {
  display: inline-block;
  background: #f8fbf4;
  border: 2px solid #dfe8d6;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 1rem;
  line-height: 1.4;
  color: #20302a;
}

.hint-box {
  display: block;
  text-align: center;
  margin: 10px auto 16px;
  max-width: 520px;
  background: #f8fbf4;
  border: 2px solid #dfe8d6;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 1rem;
  line-height: 1.4;
  color: #20302a;
}

.bus-stop-rendered {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin: 8px auto 18px;
  font-family: "Segoe UI", "Arial", sans-serif;
  font-weight: 500;
  color: #20302a;
}

.bus-stop-divisor {
  font-size: 5rem;
  line-height: 1;
  padding-top: 0px;
  padding-right: 14px;
}

.bus-stop-right {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.bus-stop-line {
  height: 0;
  border-top: 5px solid #20302a;
  margin-bottom: 0;
  width: 100%;
  min-width: 1.9em;
}

.bus-stop-number {
  font-size: 5rem;
  line-height: 0.95;
  padding-left: 12px;
  border-left: 5px solid #20302a;
  margin-top: -5px;
  padding-top: 14px;
}

.bus-stop-question-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.bus-stop-extra-text {
  max-width: 900px;
  text-align: center;
  line-height: 1.2;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Fraction and mixed number display */
.inline-mixed-number {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  vertical-align: middle;
  margin: 0 0.1em;
  white-space: nowrap;
}

.inline-mixed-whole {
  display: inline-block;
}

.inline-fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.inline-fraction-top,
.inline-fraction-bottom {
  display: block;
  font-size: 0.7em;
  line-height: 1.05;
  padding: 0 0.15em;
}

.inline-fraction-bar {
  display: block;
  width: 100%;
  min-width: 1.2em;
  border-top: 2px solid currentColor;
  margin: 0.08em 0;
}

.inline-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
  text-align: center;
}

.mixed-number-answer-input {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px;
  vertical-align: middle;
}

.standalone-mixed-number-answer-input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 0;
}

.mixed-whole-box {
  width: 54px;
  text-align: center;
  font-size: 1.4rem;
  border: 2px solid #d7dfcd;
  border-radius: 10px;
  padding: 6px 4px;
  color: #20302a;
  background: #fff;
}

.fraction-answer-input {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex: 0 0 auto;
  margin: 0 6px;
}

.standalone-fraction-answer-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto 0;
  width: fit-content;
}

.fraction-box {
  width: 54px;
  text-align: center;
  font-size: 1.2rem;
  border: 2px solid #d7dfcd;
  border-radius: 10px;
  padding: 6px 4px;
  color: #20302a;
  background: #fff;
}

.fraction-answer-bar {
  width: 64px;
  height: 0;
  border-top: 3px solid #20302a;
  background: transparent;
  margin: 8px 0;
}

.fraction-fixed-part {
  min-width: 20px;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.2;
  color: #20302a;
  display: inline-block;
}

/* Fractions section tidy-up */
.quiz-card {
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.image-wrap img {
  max-width: 320px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

/* Sequence tidy-up */
.sequence-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  margin: 16px auto 8px;
  font-size: 2rem;
  line-height: 1.2;
}

.sequence-inline .inline-mixed-number,
.sequence-inline .inline-fraction,
.sequence-inline > span {
  flex: 0 0 auto;
}

.sequence-inline .inline-mixed-number {
  margin: 0 0.25em;
}

.sequence-inline .inline-fraction {
  margin: 0 0.18em;
}

.sequence-gap {
  min-width: 150px;
  min-height: 60px;
  border: 2px dashed #ccd7c2;
  border-radius: 16px;
  background: #fff;
}

@media (max-width: 700px) {
  .bus-stop-divisor,
  .bus-stop-number {
    font-size: 3.5rem;
  }

  .bus-stop-divisor {
    padding-top: 0;
    padding-right: 10px;
  }

  .bus-stop-number {
    padding-left: 10px;
    border-left-width: 4px;
    margin-top: -4px;
    padding-top: 12px;
  }

  .bus-stop-line {
    border-top-width: 4px;
    margin-bottom: 0;
    height: 0;
  }

  .written-method {
    font-size: 1.5rem !important;
  }

  .bus-stop-extra-text {
    font-size: 1.15rem;
  }

  .question-text {
    font-size: 1.05rem !important;
  }
}

/* ── Story-part question type ─────────────────────────────────────────────── */
/* Two kinds:
     teaching     — soft brand-green tint, brand-green left bar, "Teaching" label
     word-problem — soft amber/cream tint, amber left bar, "Word problem · Step N of M" label
   The per-part .story-context-part keeps the same outer shape; the kind classes
   (.story-context-teaching / .story-context-word-problem) override fill, border
   and label colour. */

.story-context {
  background: #e8f4fd;
  border: 1px solid #b8d4ed;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 4px 0 20px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1a2e3b;
  white-space: pre-wrap;
  text-align: left;
}

.story-part-row {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.story-part-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.story-part-prompt {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
  text-align: center;
  color: var(--ink);
  white-space: pre-wrap;
}

.story-part-row .inline-wrap {
  margin: 6px auto 0;
}

/* Per-part context — outer shape (kind classes set the colours) */
.story-context-part {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.15rem;
  border-left-width: 5px;
  border-left-style: solid;
}

.story-part-row:first-child .story-context-part {
  margin-top: 0;
}

/* The body of the context (the actual prose) */
.story-context-body {
  white-space: pre-wrap;
}

/* Small label badge at the top of every per-part context */
.story-context-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.story-context-label svg {
  flex-shrink: 0;
}

/* Teaching (default) — brand green */
.story-context-teaching {
  background: #f3f8e7;
  border-color: #cfe3ab;
  border-left-color: #8BC229;
  color: #2c3a1a;
}

.story-context-label-teaching {
  color: #48631b;
}

/* Word problem — amber */
.story-context-word-problem {
  background: #fff8e6;
  border-color: #f0d27a;
  border-left-color: #f5a623;
  color: #3a2b08;
}

.story-context-label-word-problem {
  color: #8b5a00;
}

/* Match items with images ──────────────────────────────────────────────── */
.match-item-image {
  padding: 6px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.match-item-image img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ── Passage (comprehension) question type ───────────────────────────────── */

/* Scrollable text panel */
.passage-wrap {
  border: 1px solid #c8dbb8;
  border-radius: 12px;
  background: #f4f9ef;
  margin-bottom: 24px;
  overflow: hidden;
}

.passage-title {
  background: #4a6741;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 18px;
  letter-spacing: 0.02em;
}

.passage-text {
  max-height: 300px;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 1rem;
  line-height: 1.8;
  color: #20302a;
  white-space: pre-wrap;
  text-align: left;
}

/* Poem variant — centred, slightly larger leading */
.passage-text.passage-poem {
  text-align: center;
  line-height: 2;
  font-size: 1rem;
}

/* Subtle scrollbar */
.passage-text::-webkit-scrollbar { width: 6px; }
.passage-text::-webkit-scrollbar-track { background: #e8f0e0; border-radius: 0 0 12px 0; }
.passage-text::-webkit-scrollbar-thumb { background: #8aab78; border-radius: 4px; }

/* Question rows within a passage */
.passage-part-row {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.passage-part-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* MCQ options within a passage question — flex wrap instead of grid */
.passage-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}

.passage-options .option-btn {
  padding: 9px 20px;
  border: 2px solid #c8dbb8;
  border-radius: 24px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: auto;
}

.passage-options .option-btn:hover {
  background: #eef6df;
  border-color: #4a6741;
}

.passage-options .option-btn.selected {
  background: #4a6741;
  color: #fff;
  border-color: #4a6741;
}

.passage-options .option-btn.correct-opt {
  background: #d4edda;
  border-color: #3a7c5a;
  color: #1a4a2a;
}

.passage-options .option-btn.wrong-opt {
  background: #fdecea;
  border-color: #c85c4a;
  color: #7a1a10;
}

@media (max-width: 700px) {
  .passage-text {
    max-height: 220px;
    font-size: 0.95rem;
    padding: 12px 14px;
  }

  .passage-options .option-btn {
    font-size: 0.9rem;
    padding: 8px 14px;
  }
}

/* ── Two-column poem layout ──────────────────────────────────────────────── */
/* Use passageClass: "passage-poem-columns" in quiz data for poems */

.passage-poem-columns {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid var(--line, #dfe8d6);
  text-align: left;
  line-height: 2;
  max-height: none;      /* let columns determine height — no scroll needed */
  overflow-y: visible;
}

/* Each stanza stays together — never split across columns */
.passage-poem-columns p {
  break-inside: avoid;
  margin: 0 0 1rem;
}

@media (max-width: 600px) {
  /* Single column on small screens — lines too long to split */
  .passage-poem-columns {
    column-count: 1;
    column-rule: none;
  }
}

/* ── sentence-drag question type ─────────────────────────────────────────── */

/* Word bank — sits above the sentence rows */
.sentence-drag-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 14px 16px;
  background: #f4f9ef;
  border: 1px solid #c8dbb8;
  border-radius: 14px;
  margin: 0 auto 20px;
  max-width: 780px;
}

/* Stack of sentence rows */
.sentence-drag-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
  max-width: 780px;
}

/* Each sentence row — left-aligned, wraps on small screens */
.sentence-drag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1.05rem;
  line-height: 1.5;
  padding: 8px 12px;
  background: #fafcf8;
  border: 1px solid var(--line, #dfe8d6);
  border-radius: 12px;
}

.sentence-drag-text {
  color: var(--ink, #20302a);
}

/* Drop zone within a sentence row */
.sentence-drag-drop {
  min-width: 110px;
  min-height: 38px;
  border: 2px dashed #aac896;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink, #20302a);
  padding: 4px 10px;
  transition: border-color 0.15s, background 0.15s;
}

.sentence-drag-drop:hover {
  border-color: #4a6741;
  background: #eef6df;
}

/* Result colours shown after checking */
.sentence-drag-drop.drop-correct {
  border-color: #3a7c5a;
  background: #d4edda;
  color: #1a4a2a;
}

.sentence-drag-drop.drop-wrong {
  border-color: #c85c4a;
  background: #fdecea;
  color: #7a1a10;
}

@media (max-width: 600px) {
  .sentence-drag-row {
    font-size: 0.95rem;
  }
  .sentence-drag-drop {
    min-width: 90px;
  }
}

/* ── Match question — fixed left / shuffled right layout ─────────────────── */

/* Left column items — question side, fixed order */
.match-item-left {
  border-color: #b8d4ed;
  background: #f0f7ff;
  cursor: pointer;
}

.match-item-left:hover {
  border-color: #3A7CA5;
  background: #e0f0fc;
}

/* Right column items — answer side, shuffled */
.match-item-right {
  border-color: #c8dbb8;
  background: #f4f9ef;
  cursor: pointer;
}

.match-item-right:hover {
  border-color: #4a6741;
  background: #eef6df;
}

/* Hint text below match grid */
.match-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted, #5b6b63);
  margin-top: 8px;
}

/* ── column-calc question type ───────────────────────────────────────────── */

.col-calc-grid {
  display: grid;
  gap: 0;
  width: fit-content;
  margin: 8px auto 20px;
  font-family: "Consolas", "Lucida Console", "Courier New", monospace;
  font-size: 2.4rem;
  line-height: 1;
}

/* Operator column — +, −, × */
.col-calc-op {
  text-align: right;
  padding-right: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--ink, #20302a);
  font-weight: 600;
  min-width: 1.8rem;
}

/* Digit cells for the input numbers */
.col-calc-digit {
  text-align: center;
  padding: 4px 2px;
  min-width: 2.6rem;
  color: var(--ink, #20302a);
}

/* Dividing line */
.col-calc-line {
  border-top: 3px solid var(--ink, #20302a);
  margin: 4px 2px 4px;
  min-width: 2.6rem;
}

/* Closing dashed line — used under the answer row in stacked layouts when
   carries are enabled. Visually "closes" the calculation before the
   scratchpad carry boxes appear below. */
.col-calc-line-close {
  border-top: 1px dashed #a0aaa0 !important;
  margin: 2px 2px 2px;
}

/* Fixed decimal point column */
.col-calc-dot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: "Consolas", "Lucida Console", "Courier New", monospace;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink, #20302a);
  padding-bottom: 4px;
  width: 0.8rem;
  min-width: 0.8rem;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* Dot in the dividing line row — no bottom padding, align to line */
.col-calc-line + .col-calc-dot,
.col-calc-dot.col-calc-line-row {
  align-items: center;
  padding-bottom: 0;
}

/* Dot in bus-stop answer row — align with input boxes */
.col-calc-busstop-dot {
  align-items: center;
  padding-bottom: 0;
  font-size: 3.5rem;
}

/* Answer cell wrapper */
.col-calc-answer-cell {
  padding: 4px 2px;
  min-width: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Answer digit input box */
.col-calc-input {
  width: 2.4rem;
  height: 2.8rem;
  text-align: center;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 700;
  border: 2px solid #aac896;
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #20302a);
  padding: 0;
  outline: none;
  transition: border-color 0.15s;
}

.col-calc-input:focus {
  border-color: var(--brand, #8BC229);
  background: #f8fbf3;
}

/* Result colours after checking */
.col-calc-input.col-calc-correct {
  border-color: #3a7c5a;
  background: #d4edda;
  color: #1a4a2a;
}

.col-calc-input.col-calc-wrong {
  border-color: #c85c4a;
  background: #fdecea;
  color: #7a1a10;
}

@media (max-width: 600px) {
  .col-calc-grid {
    font-size: 1.8rem;
  }
  .col-calc-input {
    width: 1.9rem;
    height: 2.2rem;
    font-size: 1.5rem;
  }
  .col-calc-digit,
  .col-calc-answer-cell,
  .col-calc-line {
    min-width: 2rem;
  }
  .col-calc-dot {
    font-size: 1.8rem;
  }
}

/* ── column-calc bus-stop division layout ────────────────────────────────── */

.col-calc-busstop-holder {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Answer boxes sit above the bus-stop line, right-aligned over dividend */
/* Answer boxes sit above the bus-stop line, right-aligned over dividend */
.col-calc-busstop-answer-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 2px;
}

.col-calc-busstop-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

/* Override bus-stop sizes for column-calc context */
.col-calc-busstop-divisor {
  font-size: 3.5rem !important;
  padding-right: 10px !important;
}

.col-calc-busstop-number {
  font-size: 3.5rem !important;
  padding-left: 8px !important;
  border-left-width: 4px !important;
  margin-top: -4px !important;
  padding-top: 10px !important;
}

.col-calc-busstop-right {
  flex-direction: column;
}

/* Remainder "r" label between quotient and remainder boxes */
.col-calc-remainder-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.8rem;          /* match .col-calc-input height */
  font-size: 1.6rem;
  font-weight: 700;
  color: #20302a;
  padding: 0 6px;
  font-style: italic;
}

/* Carry-boxes row sits below the dividend, ungraded scratch space.
   Layout: positioned just under the bus-stop row, right-aligned to match
   the dividend. The row has the same width and digit cells as the dividend. */
.col-calc-busstop-carry-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 2px;
  /* Inherit the right-edge alignment from holder's flex-end */
}

.col-calc-busstop-carry-slot {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.col-calc-carry-input {
  width: 16px;
  height: 16px;
  border: 1px dashed #c0c8b8;
  border-radius: 3px;
  background: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #b03030;
  padding: 0;
  outline: none;
  line-height: 1;
  opacity: 0.85;
}

.col-calc-carry-input:focus {
  border-color: var(--brand);
  border-style: solid;
}

/* Wrapper cell for a single carry input above a digit column.
   Sits in the column grid; centres the small input visually below.
   Height is small so the row doesn't take much vertical space. */
.col-calc-carry-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 0;
}

/* Subtraction borrow row sits ABOVE the minuend with one input per column
   (the "replacement" digit — the new value of this column's TOP digit
   after lending OUT). The "+10 prefix" is a separate small input INSIDE
   the minuend's digit cell (see .col-calc-digit-with-prefix below). */
.col-calc-borrow-replace,
.col-calc-borrow-prefix {
  color: #b03030;
}

/* When a minuend digit cell hosts a +10 prefix input, it needs to be
   positioned-relative so the absolutely-positioned prefix input can
   anchor itself to the top-left corner. */
.col-calc-digit-with-prefix {
  position: relative;
}

/* The +10 prefix sits at the top-left of the minuend digit cell as a
   small superscript-style input. Visually appears just before the digit
   (e.g. "1" before "2" reads as "12"). */
.col-calc-digit-with-prefix > .col-calc-borrow-prefix {
  position: absolute;
  top: -2px;
  left: 0px;
  width: 14px;
  height: 14px;
  font-size: 10px;
}

/* Strikethrough applied to the minuend's digit cell when its replacement
   has been filled in the borrow row above. Uses a CSS pseudo-element so
   the stroke is centred horizontally on the digit. */
.col-calc-digit.col-calc-digit-struck {
  position: relative;
  color: #94a08e;
}
.col-calc-digit.col-calc-digit-struck::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 2px;
  background: #d64541;
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}

@media (max-width: 600px) {
  .col-calc-busstop-divisor {
    font-size: 2.5rem !important;
  }
  .col-calc-busstop-number {
    font-size: 2.5rem !important;
  }
}

/* Scrollable image panel — for reference tables too wide to scale down legibly */
.image-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #c8dbb8;
  border-radius: 12px;
  background: #fff;
  margin: 6px auto 18px;
  padding: 8px;
  text-align: center;
  max-width: 100%;
}
.image-scroll-wrap img {
  display: inline-block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  padding: 0;
  vertical-align: middle;
}
.image-scroll-wrap::-webkit-scrollbar { height: 6px; }
.image-scroll-wrap::-webkit-scrollbar-track { background: #e8f0e0; border-radius: 0 0 12px 12px; }
.image-scroll-wrap::-webkit-scrollbar-thumb { background: #8aab78; border-radius: 4px; }
/* ── Division answer-form picker (radio strip) ────────────────────────────
   Shown above the bus-stop when a question accepts multiple answer forms
   (e.g. remainder, decimal, fraction). Hidden for single-form questions. */
.col-calc-form-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px auto 18px;
}
.col-calc-form-picker-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.col-calc-form-picker-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.col-calc-form-picker-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #cad8bc;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, background 0.12s;
}
.col-calc-form-picker-option:hover {
  border-color: var(--brand);
  background: #f8fbf3;
}
.col-calc-form-picker-option.selected {
  border-color: var(--brand);
  background: #eef6df;
  font-weight: 700;
}
.col-calc-form-picker-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

/* ── Subscript suffix to the right of the answer row ─────────────────────
   Holds the `r N` for remainder form, or the mini-fraction for fraction form.
   Sits aligned to the bottom of the main answer line so the cells over the
   dividend stay column-aligned, while the smaller suffix elements naturally
   appear lower than the main cells (subscript-like) without overlapping the
   bus-stop top horizontal line. */
.col-calc-busstop-suffix {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  align-self: flex-end;
}

/* Subscript-style 'r' between the answer line and the remainder cells */
.col-calc-remainder-label-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #20302a;
  padding: 0 4px;
  font-style: italic;
}

/* Small remainder cell — half-height of the main answer cell */
.col-calc-rem-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}
.col-calc-rem-input {
  width: 1.7rem !important;
  height: 1.9rem !important;
  font-size: 1.2rem !important;
  text-align: center;
  border: 2px dashed #cad8bc;
  border-radius: 6px;
  background: #fff;
  padding: 0 !important;
}
.col-calc-rem-input:focus {
  border-color: var(--brand, #8BC229);
  background: #f8fbf3;
}
.col-calc-rem-input.col-calc-correct {
  border-style: solid;
  border-color: var(--correct1);
  background: #eef6df;
}
.col-calc-rem-input.col-calc-wrong {
  border-style: solid;
  border-color: var(--wrong);
  background: #fcebeb;
}

/* ── Mini-fraction for fraction-form division answers ─────────────────────
   Sits inside `.col-calc-busstop-suffix` (so it inherits the subscript
   transform). Compact size matching the remainder-cell scale. */
.col-calc-mini-fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2rem;
}
.col-calc-mini-fraction-row {
  display: inline-flex;
  flex-direction: row;
  gap: 2px;
}
.col-calc-mini-fraction-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.col-calc-mini-fraction-bar {
  width: 100%;
  min-width: 1.7rem;
  height: 2px;
  background: #20302a;
  margin: 2px 0;
}
.col-calc-mini-input {
  width: 1.7rem !important;
  height: 1.9rem !important;
  font-size: 1.2rem !important;
  text-align: center;
  border: 2px dashed #cad8bc;
  border-radius: 6px;
  background: #fff;
  padding: 0 !important;
}
.col-calc-mini-input:focus {
  border-color: var(--brand, #8BC229);
  background: #f8fbf3;
}
.col-calc-mini-input.col-calc-correct {
  border-style: solid;
  border-color: var(--correct1);
  background: #eef6df;
}
.col-calc-mini-input.col-calc-wrong {
  border-style: solid;
  border-color: var(--wrong);
  background: #fcebeb;
}
/* ========================================
   CLICKABLE EDIT
======================================== */
.clickable-edit-question{
  margin:20px 0;
}
.clickable-edit-sentence{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  justify-content:center;
}
.clickable-token{
  padding:8px 12px;
  border-radius:10px;
  background:#f2f4f8;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
  border:2px solid transparent;
  font-size:1.1rem;
  user-select:none;
}
.clickable-token:hover{
  background:#e6ebf3;
}
.clickable-token.selected{
  background:#eef6df;
  border-color:var(--brand);
}
/* Marking states (applied after Check) */
.clickable-token.correct{
  background:var(--correct1);
  border-color:var(--correct1);
  color:#fff;
}
.clickable-token.wrong{
  background:var(--wrong);
  border-color:var(--wrong);
  color:#fff;
}
.clickable-token.missed{
  background:#fff;
  border-color:var(--correct2);
  color:var(--ink);
}

/* ========================================
   HIGHLIGHT EVIDENCE
======================================== */
.highlight-evidence-question{
  margin:20px 0;
}
.highlight-passage{
  line-height:2;
  margin-top:14px;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.highlight-part{
  display:inline;
  padding:4px 6px;
  margin:0 2px;
  border-radius:6px;
  cursor:pointer;
  transition:background 0.15s ease, box-shadow 0.15s ease;
  border:2px solid transparent;
}
.highlight-part:hover{
  background:#f3f4f6;
}
.highlight-part.selected{
  background:#eef6df;
  border-color:var(--brand);
}
/* Marking states (applied after Check) */
.highlight-part.correct{
  background:var(--correct1);
  border-color:var(--correct1);
  color:#fff;
}
.highlight-part.wrong{
  background:var(--wrong);
  border-color:var(--wrong);
  color:#fff;
}
.highlight-part.missed{
  background:#fff;
  border-color:var(--correct2);
  color:var(--ink);
}

/* ================= Claude Design enhancements (consolidated) ================= */
/* =============================================================================
   Pinner Quizzes — all CSS enhancements, bundled
   Append this whole file to desktop-overrides.css (or link it after it).
   Sections:
     1. Teaching panels        (teaching-panel.css)
     2. Grouped quiz menus     (menu-grouping.css)
     3. Worked-example block    (worked-example.css)
     4. "Your turn" answer zone (answer-zone.css)
   The JS patches (renderMenu.patch.js, worked-example.patch.js,
   apply-worked-examples.js) and the data banks are separate — see DATA-SPEC.md.
   ============================================================================= */


/* ############################################################################
   teaching-panel.css
   ############################################################################ */

/* =============================================================================
   Pinner Quizzes — teaching-panel restyle
   -----------------------------------------------------------------------------
   Makes the teaching text bigger/clearer and replaces the heavy dark-green
   passage bar with a lighter branded tab.

   These rules OVERRIDE existing selectors in desktop-overrides.css. Two ways
   to apply:
     (a) append this file's contents to the END of desktop-overrides.css
         (later rules win), OR
     (b) replace the matching blocks in desktop-overrides.css in place.

   Covers two components:
     .passage-*        → the comprehension / "A Queue" panel (was dark green)
     .story-context-*  → the "TEACHING" panel (e.g. the fractions teaching box)
   ============================================================================= */

/* ── Passage panel: light branded tab instead of the dark green bar ───────── */
.passage-title {
  background: #eef6df;
  color: #48631b;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 12px 18px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid #cfe3ab;
  display: flex;
  align-items: center;
  gap: 9px;
}
.passage-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand, #8BC229);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Bigger, more readable teaching text (was 1rem / 1.8) */
.passage-text {
  max-height: 340px;
  overflow-y: auto;
  padding: 18px 22px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #20302a;
  white-space: pre-wrap;
  text-align: left;
}

/* ── "TEACHING" story-context panel: larger text, rounder, pill label ─────── */
.story-context-part {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.3rem;          /* was 1.15rem */
  line-height: 1.6;
  padding: 20px 24px;
  border-radius: 16px;
  border-left-width: 6px;
  border-left-style: solid;
}

/* Label becomes a rounded pill (was plain text) */
.story-context-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.story-context-label-teaching {
  color: #48631b;
  background: #e3efcb;
}
.story-context-label-word-problem {
  color: #8b5a00;
  background: #fdeecb;
}

/* ############################################################################
   menu-grouping.css
   ############################################################################ */

/* =============================================================================
   Pinner Quizzes — grouped quiz menu styles
   Append this to desktop-overrides.css (it loads after app.css, so these win).
   Reuses your existing CSS variables (--brand, --line, --muted, --ink …).
   ============================================================================= */

/* ── Live view toggle (only shown when a page offers both views) ──────────── */
.menu-view-toggle{
  display:flex;
  gap:4px;
  width:fit-content;
  margin:0 0 18px auto;            /* sits at the right, above the groups */
  padding:4px;
  background:#eef2eb;
  border:1px solid var(--line);
  border-radius:999px;
}
.menu-view-btn{
  border:none;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:700;
  font-size:14px;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
}
.menu-view-btn.active{
  background:var(--brand);
  color:#fff;
}

/* ── Group section + heading ──────────────────────────────────────────────── */
.quiz-group{ margin-bottom:28px; }
.quiz-group-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
}
.quiz-group-head h3{
  margin:0;
  font-size:20px;
  color:var(--ink);
}
.quiz-group-num{
  flex:none;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--brand-dark);
  color:#fff;
  font-weight:800;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.quiz-group-rule{
  flex:1;
  height:2px;
  background:var(--line);
  border-radius:2px;
}
.quiz-group-count{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}

/* ── Card footer alignment ────────────────────────────────────────────────
   Titles line up at the top; Start Quiz pins to the bottom of each card;
   the CHALLENGE tag sits in a fixed-height slot beneath it so buttons stay
   aligned across a row whether or not a card is a challenge. */
.quiz-card{ justify-content:flex-start; }
.quiz-card > button{ margin-top:auto; }

.quiz-card-title-row{
  display:flex;
  align-items:flex-start;
  gap:11px;
}
.quiz-step-badge{
  flex:none;
  width:30px;
  height:30px;
  border-radius:999px;
  background:#eef6df;
  color:#48631b;
  border:2px solid #cfe3ab;
  font-weight:800;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.quiz-challenge-slot{
  min-height:20px;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.quiz-challenge-badge{
  font-size:12px;
  font-weight:800;
  letter-spacing:0.04em;
  color:#8b5a00;
  background:#fff3dc;
  border:1px solid #f5cf85;
  padding:3px 12px;
  border-radius:999px;
}

/* ############################################################################
   worked-example.css
   ############################################################################ */

/* =============================================================================
   Pinner Quizzes — "Worked example" teaching block
   Append to desktop-overrides.css (loads after app.css). Uses your palette vars.
   ============================================================================= */

.worked-example{
  margin-top:16px;
  background:#fff;
  border:1.5px solid #dbe6c4;
  border-radius:12px;
  overflow:hidden;
}
.worked-example-label{
  background:#f6f7ef;
  padding:9px 16px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.1em;
  color:#6b7752;
  border-bottom:1px solid #e4e7d6;
  text-transform:uppercase;
}
.worked-example-row{
  padding:20px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:1.7rem;
  line-height:1;
  color:var(--ink, #20302a);
}
.we-op{ font-weight:800; }
.we-text{ font-size:1rem; font-weight:600; color:var(--muted, #5b6b63); }
.we-pill{
  font-size:0.95rem;
  font-weight:800;
  color:#48631b;
  background:#eef6df;
  border:1px solid #cfe3ab;
  padding:8px 14px;
  border-radius:999px;
  white-space:nowrap;
}
.we-frac{ font-weight:800; }
.we-frac.we-accent{ color:var(--brand, #8BC229); }
.we-frac.we-result{ color:var(--brand-dark, #6f9e1d); }

/* emphasised answers for non-fraction results (percentages, ratios, decimals) */
.we-pill.we-pill-result{
  background:var(--brand, #8BC229);
  color:#fff;
  border-color:var(--brand, #8BC229);
}
.we-text.we-text-result{
  color:var(--brand-dark, #6f9e1d);
  font-weight:800;
  font-size:1.3rem;
}

/* keep the stacked fraction proportional to the row size */
.worked-example-row .inline-fraction-top,
.worked-example-row .inline-fraction-bottom{ font-size:0.62em; }

/* ############################################################################
   answer-zone.css
   ############################################################################ */

/* =============================================================================
   Pinner Quizzes — "Your turn" answer zone
   -----------------------------------------------------------------------------
   Balances the heavy .story-context-part teaching panel on story-part
   (teach -> ask -> teach -> ask) and passage quizzes, so the question the pupil
   must answer reads as the active step rather than filler.

   Scoped to .story-part-prompt (story-part + passage renderers only), so
   standalone single-question screens (.question-text) are untouched -- fully
   backwards compatible.

   Convention: teaching = green FILLED panel (read this); answer = WHITE OUTLINED
   zone with a YOUR TURN pill (do this). Append to desktop-overrides.css.

   ── ONE-LINE JS PREREQUISITE (for column-calc only) ───────────────────────
   The live column-calc `entry` wrapper inside a story-part is created WITHOUT a
   class (app.js renderColumnEntryGrid, the centring div around `.col-calc-grid`).
   CSS forbids :has() inside :has(), so the *prompt* above it cannot be matched
   through the grid. Add ONE line so it has a class:

       // in renderColumnEntryGrid, where the centring div is made:
       const wrap = document.createElement('div');
       wrap.className = 'col-calc-entry-wrap';      // <-- add this line
       wrap.style.textAlign = 'center';
       wrap.style.margin = '8px auto 14px';

   (The wrapper has no class today, so this is safe.) Every other answer type
   already has a stable class and needs no JS change.

   COVERAGE (wrapper = element immediately after .story-part-prompt):
     .inline-wrap ............ text / multi-text / drag-fill / equiv-fraction   (standard)
     .passage-options ........ mcq                                              (standard)
     .col-calc-entry-wrap .... column-calc `entry` (vertical, stays standard)   (standard)
     .passage-subpart-wrap ... multi-select-mcq, sentence-drag, order,          (wide)
                               category-sort, clickable-edit, highlight-evidence,
                               bracketed-choice, letter-fill, multi-drag-fill
     .gridq-wrap ............. grid                                             (wide)
   match & column-calc as *standalone questions* use .question-text, not
   .story-part-prompt, so they are intentionally NOT touched here.

   :has() guards every rule, so a prompt is only boxed when it is actually
   followed by an answer input (supported in all current browsers).
   ============================================================================= */

/* ── Top of the zone: the prompt (all answer types) ───────────────────────── */
.story-part-prompt:has(+ .inline-wrap),
.story-part-prompt:has(+ .passage-options),
.story-part-prompt:has(+ .col-calc-entry-wrap),
.story-part-prompt:has(+ .passage-subpart-wrap),
.story-part-prompt:has(+ .gridq-wrap){
  position: relative;
  max-width: 620px;
  margin: 22px auto 0;
  padding: 26px 22px 14px;
  background: #ffffff;
  border: 2.5px solid var(--brand, #8BC229);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink, #20302a);
}

.story-part-prompt:has(+ .inline-wrap)::before,
.story-part-prompt:has(+ .passage-options)::before,
.story-part-prompt:has(+ .col-calc-entry-wrap)::before,
.story-part-prompt:has(+ .passage-subpart-wrap)::before,
.story-part-prompt:has(+ .gridq-wrap)::before{
  content: "YOUR TURN";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand, #8BC229);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(107,163,46,0.30);
}

/* ── Bottom of the zone: the answer, joined to the prompt above ───────────── */
.story-part-prompt + .inline-wrap,
.story-part-prompt + .passage-options,
.story-part-prompt + .col-calc-entry-wrap,
.story-part-prompt + .passage-subpart-wrap,
.story-part-prompt + .gridq-wrap{
  max-width: 620px;
  margin: 0 auto 12px;
  padding: 10px 22px 24px;
  background: #ffffff;
  border: 2.5px solid var(--brand, #8BC229);
  border-top: none;
  border-radius: 0 0 18px 18px;
  box-sizing: border-box;
}

/* ── Wide answers (grid, interactive sub-parts) widen together ────────────── */
/* Column-calc grids are vertical/narrow, so they stay at the standard width. */
.story-part-prompt:has(+ .passage-subpart-wrap),
.story-part-prompt:has(+ .gridq-wrap),
.story-part-prompt + .passage-subpart-wrap,
.story-part-prompt + .gridq-wrap{
  max-width: 880px;
}

/* ── Make a single text input an obvious target ───────────────────────────── */
.story-part-prompt + .inline-wrap .text-answer-input{
  font-size: 1.15rem;
  padding: 10px 12px;
  border: 2px solid #cfe3ab;
  border-radius: 12px;
  background: #f8fbf3;
  min-width: 96px;
}
.story-part-prompt + .inline-wrap .text-answer-input:focus{
  border-color: var(--brand, #8BC229);
  background: #ffffff;
  outline: none;
}

/* ── Hover / focus emphasis (both halves react together) ──────────────────── */
.story-part-prompt:has(+ .inline-wrap),
.story-part-prompt:has(+ .passage-options),
.story-part-prompt:has(+ .col-calc-entry-wrap),
.story-part-prompt:has(+ .passage-subpart-wrap),
.story-part-prompt:has(+ .gridq-wrap),
.story-part-prompt + .inline-wrap,
.story-part-prompt + .passage-options,
.story-part-prompt + .col-calc-entry-wrap,
.story-part-prompt + .passage-subpart-wrap,
.story-part-prompt + .gridq-wrap{
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Prompt (top half) lights up when the zone is hovered or its input focused */
.story-part-prompt:hover:has(+ .inline-wrap),
.story-part-prompt:has(+ .inline-wrap:hover),
.story-part-prompt:has(+ .inline-wrap:focus-within),
.story-part-prompt:hover:has(+ .passage-options),
.story-part-prompt:has(+ .passage-options:hover),
.story-part-prompt:has(+ .passage-options:focus-within),
.story-part-prompt:hover:has(+ .col-calc-entry-wrap),
.story-part-prompt:has(+ .col-calc-entry-wrap:hover),
.story-part-prompt:has(+ .col-calc-entry-wrap:focus-within),
.story-part-prompt:hover:has(+ .passage-subpart-wrap),
.story-part-prompt:has(+ .passage-subpart-wrap:hover),
.story-part-prompt:has(+ .passage-subpart-wrap:focus-within),
.story-part-prompt:hover:has(+ .gridq-wrap),
.story-part-prompt:has(+ .gridq-wrap:hover),
.story-part-prompt:has(+ .gridq-wrap:focus-within){
  border-color: var(--brand-dark, #6f9e1d);
  box-shadow: 0 -4px 16px rgba(107,163,46,0.12);
}
/* Answer (bottom half) lights up in the same states */
.story-part-prompt:hover + .inline-wrap,
.story-part-prompt + .inline-wrap:hover,
.story-part-prompt + .inline-wrap:focus-within,
.story-part-prompt:hover + .passage-options,
.story-part-prompt + .passage-options:hover,
.story-part-prompt + .passage-options:focus-within,
.story-part-prompt:hover + .col-calc-entry-wrap,
.story-part-prompt + .col-calc-entry-wrap:hover,
.story-part-prompt + .col-calc-entry-wrap:focus-within,
.story-part-prompt:hover + .passage-subpart-wrap,
.story-part-prompt + .passage-subpart-wrap:hover,
.story-part-prompt + .passage-subpart-wrap:focus-within,
.story-part-prompt:hover + .gridq-wrap,
.story-part-prompt + .gridq-wrap:hover,
.story-part-prompt + .gridq-wrap:focus-within{
  border-color: var(--brand-dark, #6f9e1d);
  box-shadow: 0 4px 16px rgba(107,163,46,0.12);
}


/* ===================================================================
   Answer-zone hover — made clearly visible (Pinner tweak, overrides the
   very-subtle default). Light fill + stronger shadow + darker border on
   hover or when the input is focused. Reversible: delete this block.
   =================================================================== */
.story-part-prompt:hover:has(+ .inline-wrap),
.story-part-prompt:has(+ .inline-wrap:hover),
.story-part-prompt:has(+ .inline-wrap:focus-within),
.story-part-prompt:hover:has(+ .passage-options),
.story-part-prompt:has(+ .passage-options:hover),
.story-part-prompt:has(+ .passage-options:focus-within),
.story-part-prompt:hover:has(+ .col-calc-entry-wrap),
.story-part-prompt:has(+ .col-calc-entry-wrap:hover),
.story-part-prompt:has(+ .col-calc-entry-wrap:focus-within),
.story-part-prompt:hover:has(+ .passage-subpart-wrap),
.story-part-prompt:has(+ .passage-subpart-wrap:hover),
.story-part-prompt:has(+ .passage-subpart-wrap:focus-within),
.story-part-prompt:hover:has(+ .gridq-wrap),
.story-part-prompt:has(+ .gridq-wrap:hover),
.story-part-prompt:has(+ .gridq-wrap:focus-within){
  border-color: var(--brand-dark, #6f9e1d) !important;
  background: #f4fae9 !important;
  box-shadow: 0 -6px 18px rgba(107,163,46,0.28) !important;
}
.story-part-prompt:hover + .inline-wrap,
.story-part-prompt + .inline-wrap:hover,
.story-part-prompt + .inline-wrap:focus-within,
.story-part-prompt:hover + .passage-options,
.story-part-prompt + .passage-options:hover,
.story-part-prompt + .passage-options:focus-within,
.story-part-prompt:hover + .col-calc-entry-wrap,
.story-part-prompt + .col-calc-entry-wrap:hover,
.story-part-prompt + .col-calc-entry-wrap:focus-within,
.story-part-prompt:hover + .passage-subpart-wrap,
.story-part-prompt + .passage-subpart-wrap:hover,
.story-part-prompt + .passage-subpart-wrap:focus-within,
.story-part-prompt:hover + .gridq-wrap,
.story-part-prompt + .gridq-wrap:hover,
.story-part-prompt + .gridq-wrap:focus-within{
  border-color: var(--brand-dark, #6f9e1d) !important;
  background: #f4fae9 !important;
  box-shadow: 0 6px 18px rgba(107,163,46,0.28) !important;
}