.editorPane {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

.toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  /* Size-query container so the actions below respond to the *pane's* width (the
     toolbar spans it), not the viewport's. Scoped to the toolbar — not the pane —
     to keep size containment well clear of the Monaco editor's own layout. */
  container-type: inline-size;
}

.spacer {
  flex: 1 1 auto;
}

/* Toolbar controls are the shared primitives: Draft/Published is a
   SegmentedControl, Publish/Revert/Extract are Buttons (arch 09 §4). */

/* Collapsible secondary actions (Extract, Revert): label by default, icon-only
   when the pane is narrow. Both children live in the DOM always; the container
   query swaps which one shows, so there's no reflow cost beyond display. */
.actionIcon {
  display: none;
}

.actionLabel {
  display: inline;
  white-space: nowrap;
}

/* Below this pane width the labels would crowd Publish / wrap, so the secondary
   actions shed their text and become square icon buttons (the accessible name +
   title keep them identifiable). 480px is comfortably above the 384px pane
   minimum, so the collapse is in effect across the whole narrow range. The
   .toolbar prefix outranks the Button primitive's own padding. */
@container (max-width: 480px) {
  .toolbar .collapsible {
    width: var(--control-height);
    padding: 0;
  }
  .collapsible .actionLabel {
    display: none;
  }
  .collapsible .actionIcon {
    display: inline-flex;
  }
}

.editorWrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.editor {
  height: 100%;
  width: 100%;
}

.placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  background: var(--bg);
  pointer-events: none;
}

/* Inline render/parse error surface (spec §03E) — monospaced, distinct. */
.error {
  flex: 0 0 auto;
  max-height: 30%;
  overflow: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--support-error);
  background: var(--layer-01);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--support-error);
  white-space: pre-wrap;
  word-break: break-word;
}
