.diagnostic-output {
  contain: inline-size;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);

  .diagnostic-output-section + .diagnostic-output-section {
    border-top: 1px solid var(--color-border-secondary);
  }

  .diagnostic-output-heading {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-text-xs);
    font-weight: var(--weight-medium);
  }

  .diagnostic-output-content {
    max-height: 550px;
    overflow-y: auto;
    padding: var(--spacing-lg);
    color: var(--color-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-text-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
  }
}