/* CELPIP Reading surface for EnglishCBT. Reuses the shared exam.css chrome and
 * question styles; this file adds the reading-material pane and the level result. */

#materialPane { flex: 1 1 50%; border-right: 1px solid var(--line); }
#questionPane { flex: 1 1 50%; }

.cmaterial { max-width: 64ch; font-size: 15px; line-height: 1.6; }
.cmaterial h3 { font-size: 16px; margin: 2px 0 10px; color: var(--purple-900); }
.cmaterial h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #555; margin: 18px 0 8px; }
.cmaterial p { margin: 0 0 12px; }
.cmaterial .cpara { padding-left: 22px; position: relative; }
.cmaterial .cpara .clabel { position: absolute; left: 0; font-weight: 800; color: var(--purple); }
.cmaterial .cblank { font-weight: 700; color: var(--purple); white-space: nowrap; }
.cmsg { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: #fbfbfd; margin-bottom: 14px; }

.ctable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 14px; }
.ctable th, .ctable td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.ctable th { background: var(--chrome); font-size: 12.5px; }

.cpart-tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); margin-bottom: 4px; }

/* results */
.clevelwrap { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; padding: 8px 0 18px; border-bottom: 1px solid var(--line-soft); }
.clevel { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: var(--purple); }
.clevel small { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #666; }
.cdisclaimer { font-size: 12.5px; color: #6b4a05; background: #fff6e6; border-left: 3px solid var(--amber); padding: 9px 12px; border-radius: 0 4px 4px 0; margin: 12px 0; line-height: 1.5; }

@media (max-width: 820px) {
  #materialPane, #questionPane { flex: 1 1 auto; border-right: 0; }
  body.show-p #questionPane { display: none; }
  body:not(.show-p) #materialPane { display: none; }
  .cmaterial { max-width: none; }
}