/* PrepMora — house-style Reading & Writing explanations on the exam screen
   (practice.html, the question bank). Same markup as the practice tests'
   test-answers page, drawn in the exam screen's own white Bluebook tokens
   (exam.css), which stay white in dark mode by design.

   Markup: p.ex-h section headings; ul.ex-sent the text read line by line;
   ul.ex-ch the choices, which explain-pair.js rebuilds into ol.ex-choices
   (each choice printed as the question shows it, then explained). The .ex-ch
   rules stay as the fallback for any entry the rebuild declines. */

/* Component rules below set display; the UA [hidden] rule must still win. */
[hidden] { display: none !important; }

.rationale .ex-h {
  font-family: var(--e-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-ink-3);
  margin: 22px 0 8px;
}

.rationale .ex-h:first-child {
  margin-top: 2px;
}

.rationale .ex-h + p {
  margin-top: 0;
}

.rationale .ex-sent,
.rationale .ex-ch,
.rationale .ex-choices {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rationale .ex-sent li {
  padding: 8px 0;
  border-top: 1px solid var(--e-line-soft);
}

.rationale .ex-sent li:first-child {
  border-top: none;
  padding-top: 2px;
}

/* Lines quoted from the passage read as the passage, not as commentary. */
.rationale .ex-sent q {
  font-style: italic;
  color: var(--e-ink-2);
}

.rationale .ex-sent q::before,
.rationale .ex-sent q::after {
  content: "";
}

/* Fallback list: the letter is absolutely positioned so the prose after it
   (a bare text node) can never be squeezed into a grid column. */
.rationale .ex-ch li {
  position: relative;
  padding: 9px 0 9px 38px;
  border-top: 1px solid var(--e-line-soft);
}

.rationale .ex-ch li:first-child {
  border-top: none;
}

.rationale .ex-ch li > b:first-child {
  position: absolute;
  left: 0;
  top: 9px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1.5px solid var(--e-ink-2);
  display: grid;
  place-items: center;
  font-family: var(--e-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--e-ink);
}

.rationale .ex-ch li.ok > b:first-child {
  background: var(--e-good);
  border-color: var(--e-good);
  color: #fff;
}

/* Each choice as printed, then why it is right or wrong. */
.rationale .ex-choice {
  padding: 14px 0;
  border-top: 1px solid var(--e-line-soft);
}

.rationale .ex-choice:first-child {
  border-top: none;
  padding-top: 4px;
}

.rationale .ex-choice-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-family: var(--e-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-ink-3);
}

.rationale .ex-choice-tag {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1.5px solid var(--e-ink-2);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--e-ink);
}

.rationale .ex-choice.is-correct .ex-choice-tag {
  background: var(--e-good);
  border-color: var(--e-good);
  color: #fff;
}

.rationale .ex-choice-verdict {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--e-line);
  color: var(--e-ink-3);
}

.rationale .ex-choice.is-correct .ex-choice-verdict {
  border-color: var(--e-good);
  color: var(--e-good);
}

.rationale .ex-choice-orig {
  margin: 0 0 8px;
  padding: 9px 13px;
  border-left: 2px solid var(--e-choice-line);
  border-radius: 0 7px 7px 0;
  background: var(--e-panel);
  color: var(--e-ink);
  line-height: 1.5;
}

.rationale .ex-choice.is-correct .ex-choice-orig {
  border-left-color: var(--e-good);
  background: var(--e-good-soft);
}

.rationale .ex-choice-why {
  color: var(--e-ink-2);
}

.rationale .ex-note {
  font-size: 14px;
  color: var(--e-ink-3);
  border-left: 2px solid var(--e-line);
  padding-left: 14px;
  margin-top: 14px;
}