editor.css

/* Editor chrome only; the preview pane is styled by the live blog.css. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, sans-serif; }

.ed-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid #d0d7de; background: #f6f8fa;
  font-size: .9rem; height: 49px;
}
.ed-file { color: #57606a; font-family: ui-monospace, "SF Mono", monospace; font-size: .82em; }
.ed-spacer { flex: 1; }
.ed-status { color: #57606a; font-size: .82em; }
.ed-bar button {
  padding: 6px 12px; border: 1px solid #d0d7de; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: .85rem;
}
.ed-bar button:disabled { opacity: .45; cursor: not-allowed; }
#ed-commit { background: #0d7a70; color: #fff; border-color: #0d7a70; }

/* Left pane width is a CSS variable the drag handle updates. */
.ed-split { display: grid; grid-template-columns: var(--leftw, 1fr) 6px minmax(0, 1fr); height: calc(100vh - 49px); }
.ed-src {
  border: 0; padding: 20px; min-width: 0;
  font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; line-height: 1.6;
  resize: none; outline: none; tab-size: 2;
}
.ed-gutter { background: #e3e8ee; cursor: col-resize; }
.ed-gutter:hover, .ed-gutter.dragging { background: #aab4c0; }
.ed-preview { overflow: auto; padding: 24px 36px; min-width: 0; }
.ed-preview img { max-width: 100%; }
/* The preview reuses the blog stylesheet, which caps content at the blog's fixed
   column (~680px). In the editor we want the rendered page to fill its pane so
   the divider visibly resizes it. The #id beats blog.css's class selectors. */
#ed-preview, #ed-preview > *, #ed-preview figure, #ed-preview table,
#ed-preview .callout, #ed-preview pre, #ed-preview .post__foot { max-width: none; }

@media (max-width: 760px) {
  .ed-split { grid-template-columns: 1fr; height: auto; }
  .ed-gutter { display: none; }
  .ed-src { min-height: 55vh; border-bottom: 1px solid #d0d7de; }
}