/* Authored conditions diagrams: keep the drawing between the statement and controls. */
.question-condition-figure {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 18px auto 24px;
  padding: 12px 16px 10px;
  border: 1px solid #d9e7f3;
  border-radius: 14px;
  background: #fcfeff;
  color: #285d85;
  overflow: hidden;
  break-inside: avoid;
}
.question-condition-figure svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 360px;
  margin: 0 auto;
  aspect-ratio: auto;
}
.question-condition-figure figcaption {
  display: block;
  margin: 7px 0 0;
  color: #647d91;
  font: 12px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
}
.question-condition-figure + .option-list,
.question-condition-figure + .options,
.question-condition-figure + .checkpoint-form {
  clear: both;
}
.onboarding-review .question-condition-figure,
.wrong-card .question-condition-figure {
  max-width: 460px;
}
.solution-root + .question-condition-figure {
  margin-top: 10px;
}
.task-diagram:has(.question-condition-figure) {
  display: block;
  min-height: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.task-diagram > .question-condition-figure {
  margin: 0 auto;
}
@media (max-width: 600px) {
  .question-condition-figure {
    width: 100%;
    max-width: 100%;
    margin: 14px auto 20px;
    padding: 8px 6px;
    border-radius: 10px;
  }
  .question-condition-figure svg {
    max-height: 300px;
  }
  .question-condition-figure figcaption {
    margin-top: 4px;
    font-size: 11px;
  }
}
@media print {
  .question-condition-figure {
    background: #fff;
    max-width: 130mm;
  }
}