@layer components {
  .ace-editor-wrap {
    --ace-editor-min-block-size: 120px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    min-block-size: var(--ace-editor-min-block-size);

    &.ace-editor-wrap--sql { --ace-editor-min-block-size: 140px; }
    &.ace-editor-wrap--pseudo { --ace-editor-min-block-size: 220px; }
  }

  .idb-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .idb-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Exam display prefs (#944) reach the plain-text chrome around the Ace editor (status, output
     label, result table), never the editor itself. */
  .idb-run-status {
    color: var(--exam-font-colour, var(--color-text-secondary));
    font-size: calc(0.85rem * var(--exam-font-scale, 1));
  }
  .idb-result-wrap,
  .idb-student-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .idb-result-label {
    color: var(--exam-font-colour, var(--color-text-secondary));
    font-size: calc(0.8rem * var(--exam-font-scale, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: uppercase;
  }
  .idb-result-table-wrap {
    block-size: 240px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-block-size: 120px;
    overflow: auto;
    resize: vertical;
  }
  .idb-result-table {
    border-collapse: collapse;
    color: var(--exam-font-colour, inherit);
    font-size: calc(0.85rem * var(--exam-font-scale, 1));
    inline-size: 100%;

    th,
    td {
      border: 1px solid var(--color-border);
      padding: 0.3rem 0.6rem;
      text-align: start;
    }
    thead th {
      background: var(--exam-bg-colour, var(--color-surface-raised));
      font-weight: 600;
      inset-block-start: 0;
      position: sticky;
      z-index: 1;
    }
  }
  .idb-result-empty {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin: 0;
  }
}