/* Second-batch refresh: scenario library, configuration, quality gate and knowledge base. */

.scenario-page-layout {
  grid-template-columns: 276px minmax(0, 1fr);
  gap: 24px;
}

.scenario-page-heading {
  min-height: 112px;
}

.scenario-page-heading .admin-subnav {
  align-self: center;
}

.admin-sidebar {
  top: 94px;
  height: calc(100dvh - 122px);
  padding: 0;
}

.sidebar-tabs {
  padding: 4px;
  border-color: var(--fd-color-line);
  border-radius: var(--fd-radius-md);
  background: var(--fd-color-surface-soft);
}

.sidebar-tab {
  min-height: var(--fd-control-height-md);
  color: var(--fd-color-ink-soft);
  font-size: var(--fd-font-size-meta);
  font-weight: var(--fd-font-weight-regular);
}

.sidebar-tab.is-active {
  color: var(--fd-brand-jade);
  font-weight: var(--fd-font-weight-regular);
  box-shadow: var(--fd-shadow-sm);
}

.sidebar-panel {
  margin-top: 12px;
}

.admin-sidebar nav,
.installed {
  border-color: var(--fd-color-line);
  border-radius: var(--fd-radius-md);
  background: var(--fd-color-surface);
  box-shadow: var(--fd-shadow-sm);
}

.installed {
  padding: 16px;
}

.installed > span {
  color: var(--fd-color-muted);
  font-size: var(--fd-font-size-meta);
  line-height: var(--fd-line-height-meta);
}

#installedScenarioList {
  gap: 0;
  margin-top: 12px;
  padding-right: 2px;
}

.installed-item {
  gap: 9px;
  padding: 14px 0 14px 12px;
  border-bottom: 1px solid var(--fd-color-line);
  border-left-color: var(--fd-color-line-strong);
}

.installed-item:last-child {
  border-bottom: 0;
}

.installed-item:hover {
  border-left-color: var(--fd-brand-jade);
  background: var(--fd-brand-jade-soft);
}

.installed-item strong {
  color: var(--fd-color-ink);
  font-size: var(--fd-font-size-body);
  font-weight: var(--fd-font-weight-medium);
  line-height: var(--fd-line-height-body);
}

.installed-item small {
  color: var(--fd-color-muted);
  font-size: var(--fd-font-size-caption);
}

.installed-item-actions {
  gap: 6px;
}

.scenario-display-order {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  color: var(--fd-color-muted);
  font-size: var(--fd-font-size-caption);
}

.scenario-display-order input {
  width: 58px;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--fd-color-line-strong);
  border-radius: var(--fd-radius-sm);
  color: var(--fd-color-ink);
  background: var(--fd-color-surface);
  font-size: var(--fd-font-size-caption);
}

.scenario-display-order .installed-action-button {
  min-height: 28px;
}

.installed-action-button {
  min-height: 30px;
  padding-inline: 9px;
  border-color: var(--fd-color-line-strong);
  border-radius: var(--fd-radius-sm);
  color: var(--fd-color-ink-soft);
  font-size: var(--fd-font-size-caption);
}

.installed-action-button:hover:not(:disabled) {
  border-color: var(--fd-brand-jade-line);
  color: var(--fd-brand-jade);
  background: var(--fd-brand-jade-soft);
}

.installed-action-button.is-primary {
  border-color: var(--fd-brand-jade);
  background: var(--fd-brand-jade);
}

.guide-state {
  color: var(--fd-color-success);
  font-size: var(--fd-font-size-caption);
}

.step-link {
  min-height: 44px;
  padding-inline: 14px;
  color: var(--fd-color-ink-soft);
  font-size: var(--fd-font-size-meta);
  font-weight: var(--fd-font-weight-regular);
}

.step-link.is-active {
  border-left-color: var(--fd-brand-jade);
  color: var(--fd-brand-jade);
  font-weight: var(--fd-font-weight-regular);
  background: var(--fd-brand-jade-soft);
}

.scenario-workspace {
  border-color: var(--fd-color-line);
  border-radius: var(--fd-radius-lg);
  box-shadow: var(--fd-shadow-sm);
}

.builder-section {
  padding: 32px clamp(20px, 3vw, 40px);
  border-bottom-color: var(--fd-color-line);
}

.builder-section:not(.ai-generator-section) {
  background: var(--fd-color-surface);
}

.ai-generator-section {
  background: var(--fd-brand-jade-soft);
}

.section-heading {
  min-height: 34px;
  margin-bottom: 24px;
}

.section-heading > div {
  align-items: center;
  gap: 12px;
}

.section-heading > div > span {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fd-brand-jade-line);
  border-radius: 50%;
  color: var(--fd-brand-jade);
  background: var(--fd-brand-jade-soft);
  font-size: var(--fd-font-size-caption);
  font-weight: var(--fd-font-weight-medium);
}

.section-heading h2 {
  color: var(--fd-color-ink);
  font-size: var(--fd-font-size-section-title);
  font-weight: var(--fd-font-weight-medium);
}

.subsection-heading {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--fd-color-line);
}

.subsection-heading h3 {
  color: var(--fd-color-ink);
  font-size: var(--fd-font-size-card-title);
  font-weight: var(--fd-font-weight-medium);
}

.form-grid {
  gap: 20px;
}

.two-columns {
  column-gap: 24px;
}

.scenario-workspace label > span,
.scenario-workspace .field-label {
  color: var(--fd-color-ink-soft);
  font-size: var(--fd-font-size-meta);
  font-weight: var(--fd-font-weight-regular);
}

.scenario-workspace :is(input, select, textarea) {
  min-height: var(--fd-control-height-lg);
  border-color: var(--fd-color-line-strong);
  border-radius: var(--fd-radius-md);
  font-size: var(--fd-font-size-body);
}

.scenario-workspace textarea {
  padding-block: 10px;
  line-height: var(--fd-line-height-body);
}

.field-guidance,
.field-inline-help,
.knowledge-file-summary {
  color: var(--fd-color-muted);
  font-size: var(--fd-font-size-meta);
}

.field-guidance details summary {
  color: var(--fd-brand-jade);
  font-weight: var(--fd-font-weight-regular);
}

.field-guidance-example {
  color: var(--fd-color-success) !important;
}

.known-facts-field {
  padding: 16px;
  border-color: var(--fd-brand-jade-line);
  border-radius: var(--fd-radius-md);
  background: var(--fd-brand-jade-soft);
}

.known-facts-field > span {
  color: var(--fd-brand-jade);
}

.repeater-list {
  border-top-color: var(--fd-color-line);
}

.repeater-item {
  padding-block: 24px;
  border-bottom-color: var(--fd-color-line);
}

.repeater-item-head strong {
  color: var(--fd-color-ink);
  font-size: var(--fd-font-size-body);
  font-weight: var(--fd-font-weight-medium);
}

.remove-button {
  width: 34px;
  min-height: 32px;
  border-color: var(--fd-color-danger-line);
  border-radius: var(--fd-radius-sm);
  background: var(--fd-color-danger-soft);
  color: var(--fd-color-danger);
}

.toggle-control {
  padding: 7px 10px;
  border: 1px solid var(--fd-color-line);
  border-radius: var(--fd-radius-md);
  background: var(--fd-color-surface-soft);
}

.toggle-control input {
  width: 16px;
  min-height: 16px;
  height: 16px;
}

.guide-repair-banner,
.scenario-read-only-banner {
  border-color: var(--fd-brand-jade-line);
  background: var(--fd-brand-jade-soft);
}

.guide-repair-banner strong,
.scenario-read-only-banner strong {
  color: var(--fd-brand-jade);
  font-size: var(--fd-font-size-body);
  font-weight: var(--fd-font-weight-medium);
}

.guide-repair-banner span,
.scenario-read-only-banner span {
  color: var(--fd-color-ink-soft);
  font-size: var(--fd-font-size-meta);
}

.scenario-preview {
  min-height: 260px;
  border-color: var(--fd-brand-ink);
  border-radius: var(--fd-radius-md);
  background: var(--fd-brand-ink);
  font-size: var(--fd-font-size-meta);
}

.create-actions,
.ai-generator-actions {
  min-height: 60px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--fd-color-line);
}

#aiGenerationStatus,
#createStatus {
  color: var(--fd-color-muted);
  font-size: var(--fd-font-size-body);
}

.quality-dialog {
  border-color: var(--fd-color-line);
  border-radius: var(--fd-radius-lg);
  box-shadow: 0 24px 72px rgb(20 35 48 / 20%);
}

.quality-dialog-head {
  padding: 22px 24px;
  border-bottom-color: var(--fd-color-line);
}

.quality-dialog-head h2,
.quality-failures h3 {
  color: var(--fd-color-ink);
  font-size: var(--fd-font-size-section-title);
  font-weight: var(--fd-font-weight-medium);
}

.quality-dialog-head span,
.quality-dialog-summary span,
.quality-check-row span,
.quality-failure-row span,
.quality-cases-intro span,
.quality-cases-editor > span,
.quality-cases-actions p,
.quality-case-result span {
  color: var(--fd-color-muted);
  font-size: var(--fd-font-size-meta);
}

.quality-dialog-summary,
.quality-cases-intro,
.quality-cases-editor,
.quality-cases-actions {
  padding-inline: 24px;
  border-color: var(--fd-color-line);
}

.quality-check-row,
.quality-failure-row,
.quality-case-result {
  padding-inline: 24px;
  border-bottom-color: var(--fd-color-line);
}

.quality-check-row.is-passed,
.quality-case-result.is-passed {
  border-left-color: var(--fd-color-success);
}

.quality-check-row.is-failed,
.quality-failure-row,
.quality-case-result {
  border-left-color: var(--fd-color-danger);
}

@media (max-width: 1020px) {
  .scenario-page-layout {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 18px;
  }

  .builder-section {
    padding-inline: 24px;
  }
}

@media (max-width: 820px) {
  .scenario-page-layout {
    display: block;
  }

  .scenario-page-heading {
    min-height: 0;
  }

  .admin-sidebar {
    position: static;
    height: auto;
    margin: 18px 0;
  }

  .sidebar-panel {
    max-height: min(44dvh, 360px);
  }

  .scenario-workspace {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .builder-section {
    padding: 24px 16px;
  }

  .two-columns {
    grid-template-columns: 1fr;
  }

  .full-row {
    grid-column: auto;
  }

  .section-heading,
  .subsection-heading,
  .ai-generator-actions,
  .create-actions,
  .guide-repair-banner,
  .scenario-read-only-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-repair-actions,
  .create-command-group,
  .ai-generator-actions .primary {
    width: 100%;
  }

  .guide-repair-actions > button,
  .create-command-group > button {
    flex: 1;
  }

  .quality-dialog-head,
  .quality-dialog-summary,
  .quality-cases-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}