/* Conditional questions: explain the route without shrinking the form. */
.branching-editor {
  min-width: 0;
  margin: 24px 0 18px;
  padding: 17px 18px 5px;
  border: 1px solid #d9cdeb;
  border-radius: 9px;
  background: #faf8fe;
  color: #34445e;
}
.branching-editor > legend {
  max-width: 100%;
  padding: 0 7px;
  color: #513773;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.modal #question-form .branching-editor .field { color: #41516b; font-size: 14px; line-height: 1.6; }
.branching-editor .field { min-width: 0; margin-bottom: 16px; }
.branching-editor :is(input, select, textarea) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  border-color: #b9c4d6;
  color: #293a55;
  font-size: 16px;
}
.branching-editor select { text-overflow: ellipsis; padding-right: 30px; }
.branching-fields { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 0; }
.branching-editor .branching-help,
.branching-help {
  margin: 8px 0 13px;
  color: #5a6880;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.questionnaire-builder .branching-rule,
.branching-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  margin: 12px 0 16px;
  border: 1px solid #e1d7f0;
  border-left: 3px solid #8861d5;
  border-radius: 6px;
  background: #f7f3fd;
  color: #5b437c;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.branching-rule > .icon { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 3px; color: #7545ff; }
.branching-rule > span { min-width: 0; }
.branching-validation { color: #34445e; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.branching-validation h3 { color: #101a36; font-size: 17px; font-weight: 600; line-height: 1.5; margin: 0 0 12px; }
.branching-validation p { color: #52617a; font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.branching-validation strong { color: #34445e; font-weight: 600; }
.branching-validation .form-help { color: #5a6880; font-size: 13px; line-height: 1.7; }
.branching-validation .questionnaire-checklist { margin: 14px 0; }
.branching-validation .button { min-height: 44px; font-size: 15px; line-height: 1.5; white-space: normal; }
.branch-preview-summary,
.branching-preview-note,
.branching-preview-empty {
  padding: 14px 16px;
  margin: 18px 0;
  border: 1px solid #e0d7f0;
  border-radius: 7px;
  background: #f7f3fd;
  color: #5b437c;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.branching-preview-note strong,
.branching-preview-empty strong { color: #4c326c; font-weight: 600; }
.preview-question[hidden] { display: none !important; }
.interview-progress:has(#interview-route-position) { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 5px 12px; }
#interview-route-position { flex: 1 1 180px; min-width: 0; color: #52617a; font-size: 14px; line-height: 1.6; }
#interview-route-percent { flex: 0 0 auto; color: #52617a; font-size: 13px; line-height: 1.6; }
#interview-route-bar { width: 100%; max-width: 100%; }
.branching-preview-note .icon { width: 18px; height: 18px; color: #7545ff; vertical-align: middle; margin-right: 6px; }
.branching-preview-note p,
.branching-preview-empty p { margin: 5px 0 0; font-size: inherit; line-height: inherit; color: inherit; }
.sr-report .sr-report-condition {
  padding: 10px 12px;
  margin-top: 12px;
  border-left: 3px solid #9c80cd;
  border-radius: 4px;
  background: #f7f3fd;
  color: #5b437c;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.branching-editor :is(input, select, textarea):focus-visible,
.branching-validation button:focus-visible { outline: 3px solid #7545ff; outline-offset: 3px; }

@media (max-width: 760px) {
  .branching-editor { padding: 15px 14px 3px; }
  .branching-editor > legend { font-size: 16px; padding: 0 6px; }
  .modal #question-form .branching-editor .field { font-size: 15px; }
  .modal #question-form .branching-editor :is(input, select, textarea) { min-height: 48px; font-size: 16px; }
  .questionnaire-builder .branching-rule,
  .branching-rule,
  .branch-preview-summary,
  .branching-preview-note,
  .branching-preview-empty,
  .sr-report .sr-report-condition { font-size: 15px; }
  #interview-route-position { font-size: 15px; }
  .branching-validation .button { min-height: 44px; font-size: 15px; }
}
@media (max-width: 380px) {
  .branching-editor { padding-right: 11px; padding-left: 11px; }
  .questionnaire-builder .branching-rule { padding: 10px; gap: 7px; }
}
@media print {
  .sr-report .sr-report-condition { color: #26334a; border-color: #6f5b89; break-inside: avoid; }
}