.pageeditor {
  /* Full-width: fill the main pane and resize with the window (no centered cap).
     Header, Properties, body, and status bar share the pane's left edge. */
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Top-right corner controls row (save state + Live/Source toggle + Save +
   Read-view), right-aligned above the page. */
.pageeditor-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.pageeditor-status {
  color: var(--color-text-muted);
}

.pageeditor-frontmatter {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pageeditor-surface {
  /* Borderless, seamless with the canvas — the editor reads as a document, not a
     boxed form field (Obsidian parity). Grows to fill the leftover height. */
  flex: 1 1 auto;
  min-height: var(--editor-min-height);
}

/* CodeMirror fills the (now-growing) surface so the whole box is the editor. */
.pageeditor-surface .cm-editor {
  height: 100%;
}
/* Presence sits at the far left of the top controls row; everything else stays
   right-aligned (the row is justify-content:flex-end). */
.pageeditor-topbar > .presence-indicator:first-child {
  margin-right: auto;
}

/* Inline heading-style title — an H1 that happens to be editable. No box, no
   label; it aligns flush with the body's left edge (Obsidian parity). */
.doc-title-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display);
}

.doc-title-input::placeholder {
  color: var(--color-faint);
}

.doc-title-input:focus-visible {
  outline: none;
}

/* The 3-way editor-mode segmented control (RE-04-1): Live / Source / Rich, laid out as a
   tight button group so it reads as one control, not three loose icons. */
.pageeditor-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* The active mode reads as pressed: accent icon tint (Live/Source and the Rich segment
   once the guard has cleared it — aria-pressed drives it uniformly). */
.pageeditor-topbar .icon-btn[aria-pressed="true"] {
  color: var(--color-accent);
}

.pageeditor-reload {
  margin-left: var(--space-md);
}

/* Read-only-under-another's-lock (COLL-02). The editor surface is GENUINELY
   read-only (LivePreviewEditor readOnly → no caret); this wash makes that
   visible — a faint --color-surface fill + reduced text contrast so it reads
   "not yours to type in," paired with the muted hint below. Token-only. */
.pageeditor-readonly-hint {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
}

.pageeditor-surface-readonly {
  background: var(--color-surface);
  opacity: 0.85;
}

/* Manual-merge reference pane (COLL-04). After "Manual merge" the dialog closes and
   the server's version stays visible here for reference while you reconcile your
   own body. A collapsible <details> (open by default) keeps it from crowding the
   editor; token-only, mono body so the reference reads as content not chrome. */
.pageeditor-merge-reference {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-surface);
}

.pageeditor-merge-reference > summary {
  cursor: pointer;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

.pageeditor-merge-reference-body {
  margin: var(--space-sm) 0;
  max-height: 40vh;
  overflow: auto;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  white-space: pre-wrap;
  color: var(--color-text);
}

.pageeditor-merge-reference-dismiss {
  font-size: var(--font-size-label);
}
