/* reading.css — Reading-only additions on top of exam.css (topbar,
   navigator, modal, notes panel, selection toolbar are all reused as-is
   from exam.css; this file only adds the split passage/questions layout). */

.reading-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.reading-passage-pane, .reading-questions-pane {
  flex: 1 1 50%;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 24px;
}
.reading-passage-pane { border-right: 1px solid var(--ielts-border); background: var(--ielts-white); }
.reading-questions-pane { background: var(--ielts-bg); }

.passage-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.passage-header h2 { margin: 0; font-size: 18px; }
.passage-time-hint { font-size: 12px; color: var(--ielts-text-muted); }

.passage-body {
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-line;
}
.passage-body p { margin: 0 0 14px; }
.passage-body strong.para-label {
  display: inline-block;
  font-weight: 800;
  margin-right: 6px;
  color: var(--unio-blue);
}

/* Reuse .question-group/.q-row/etc. from exam.css unchanged inside questionsContainer. */

@media (max-width: 900px) {
  .reading-main { flex-direction: column; overflow-y: auto; }
  .reading-passage-pane, .reading-questions-pane { flex: none; overflow-y: visible; }
  .reading-passage-pane { border-right: none; border-bottom: 1px solid var(--ielts-border); max-height: 46vh; overflow-y: auto; }
}