p = 'frontend/src/pages/QuizPage.jsx'
s = open(p).read()

# The row knows whether it is the right answer, so the explanation under it can
# be painted the same colour and read as one card.
s = s.replace('''                      <div key={i} className="option-row">''',
'''                      <div key={i} className={`option-row${
                        showCorrect ? ' is-correct' : showWrong ? ' is-wrong' : ''}${
                        marked && current.option_explanations?.[opt] ? ' has-why' : ''}`}>''')

# Out of the button. A link cannot live inside one — that is why the article
# marker was showing as `[[288|Eczema]]`: the explanation was rendered without
# linking, because linking it would have nested an anchor in a button.
s = s.replace('''                        {marked && (showAllExplanations || openExplanations.has(i)) && current.option_explanations?.[opt] && (
                          <span className="quiz-option-explanation">
                            <RichText value={current.option_explanations[opt]} className="rich-inline" />
                          </span>
                        )}
                      </button>''',
'''                      </button>
                      {/* Why this option is right or wrong, in the row's own
                          colour rather than a white strip inside it. Outside
                          the button because it carries an article link, and an
                          anchor inside a button is neither — which is why the
                          `[[288|Eczema]]` marker was reaching the reader as
                          brackets: it was rendered unlinked to avoid the
                          nesting. */}
                      {marked && (showAllExplanations || openExplanations.has(i)) && current.option_explanations?.[opt] && (
                        <div className="quiz-option-explanation">
                          <RichText value={current.option_explanations[opt]}
                            className="rich-inline" linkArticles previewLinks={false} />
                        </div>
                      )}''')
open(p, 'w').write(s)
print('jsx done')

c = 'frontend/src/pages/QuizPlayer.css'
t = open(c).read()
t = t.replace('''.quiz-option-explanation { display: block; width: 100%; margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: var(--input-bg); border: 1px solid var(--border); font-size: .8rem; color: var(--text); text-align: left; }''',
'''/* Part of the option, not a note pinned to it. The row is one coloured card —
   letter, text, verdict, then the reason underneath in the same tint — so the
   explanation takes the row's colour and joins the option above it rather than
   sitting in a white box inside a green one. */
.quiz-option-explanation {
  flex: 1 0 100%; margin: -1px 0 0; padding: 7px 14px 9px 44px;
  border: 1px solid transparent; border-top: 0;
  border-radius: 0 0 8px 8px;
  font-size: .82rem; line-height: 1.5; text-align: left;
  background: var(--input-bg); color: var(--text-muted);
}
.option-row.has-why > .option { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.option-row.is-correct .quiz-option-explanation {
  background: var(--correct-bg); border-color: var(--correct-bd); color: var(--correct-fg);
}
.option-row.is-wrong .quiz-option-explanation {
  background: var(--wrong-bg); border-color: var(--wrong-bd); color: var(--wrong-fg);
}
/* The link inside it is the same colour as the sentence, underlined — a blue
   pill in a green card is the "showing the article link differently" the user
   asked us not to do. */
.quiz-option-explanation .al-link,
.quiz-option-explanation a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }''')

t = t.replace('''.option-row { display: flex; align-items: flex-start; gap: 4px; }''',
'''.option-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }''')
open(c, 'w').write(t)
print('css done')