/* Work = navy; brand label = teal; human correction = existing brick token. */
.output-correction {
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font: 400 1.125rem/1.6 var(--font-body);
}
.output-correction .output-correction__label {
  margin: 0 0 18px;
  color: var(--teal);
  font: 700 .8125rem/1.4 var(--font-body);
  letter-spacing: .12em;
}
.output-correction .output-correction__question {
  max-width: 36ch;
  margin: 0 0 22px;
  font: 700 1.25rem/1.5 var(--font-display);
}
.output-correction .output-correction__context {
  font-size: .9375rem;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 55ch;
}
.output-correction__answers { list-style: none; padding: 0; margin: 0; }
.output-correction__answers li { padding: 16px 0; }
.output-correction__answers li + li { border-top: 1px solid rgb(var(--navy-rgb) / .14); }
.output-correction__answer,
.output-correction__deleted,
.output-correction__replacement {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 14px;
  text-decoration: none;
}
.output-correction__deleted > span {
  text-decoration: line-through;
  text-decoration-color: var(--brick);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}
.output-correction__note {
  display: block;
  margin: 6px 0 8px 36px;
  color: var(--brick);
  font: 700 1.0625rem/1.4 var(--font-accent);
}
.output-correction__replacement { font-weight: 400; }
.output-correction__replacement > .output-correction__letter { color: var(--brick); }
.output-correction__explanation,
.output-correction__correct-label {
  display: block;
  margin: 6px 0 0 36px;
  font: 400 .8125rem/1.5 var(--font-body);
  color: var(--ink-soft);
}
/* Screen readers do not consistently announce del/ins, so name both states. */
.output-correction__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 650px) {
  .output-correction { font-size: 1.0625rem; }
  .output-correction .output-correction__question { font-size: 1.125rem; margin-bottom: 18px; }
}
