/* ============================================================================
   Split view — a second page open beside the first (js/splitview.js).
   The .split-row wrapper only exists in the DOM while the split is open, so
   none of this affects the default single-pane layout.
   ============================================================================ */

.split-row {
  flex: 1;
  display: flex;
  min-height: 0;   /* lets both children scroll instead of growing the row */
  min-width: 0;
}

/* #page-scroll already has flex:1; this just guarantees it can shrink. */
.split-row > #page-scroll { min-width: 0; }

.split-pane {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  background: var(--bg, #fff);
  border-left: 1px solid var(--border, rgba(0, 0, 0, .08));
}
html[dir="rtl"] .split-pane {
  border-left: none;
  border-right: 1px solid var(--border, rgba(0, 0, 0, .08));
}

/* ---- drag divider ---- */
.split-handle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -3px;
  width: 7px;
  cursor: col-resize;
  z-index: 3;
  background: transparent;
  border: none;
  padding: 0;
}
.split-handle::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 3px;
  width: 1px;
  background: transparent;
  transition: background .15s ease;
}
.split-handle:hover::after,
.split-handle:focus-visible::after { background: var(--accent, #5b5bd6); }
.split-handle:focus-visible { outline: none; }

/* While dragging, stop the panes from swallowing the pointer or selecting text. */
body.split-resizing { cursor: col-resize; user-select: none; }
body.split-resizing .split-pane,
body.split-resizing #page-scroll { pointer-events: none; }

/* ---- pane header ---- */
.split-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, .07));
  flex-shrink: 0;
  min-height: 42px;
}
.split-title {
  flex: 1;
  min-width: 0;
  text-align: start;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #2b2b31);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.split-title:hover { background: var(--hover, rgba(0, 0, 0, .05)); }

.split-icon-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--text-light, #6b6b76);
}
.split-icon-btn:hover { background: var(--hover, rgba(0, 0, 0, .06)); color: var(--text, inherit); }

/* ---- pane body ---- */
.split-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.split-editor {
  padding: 18px 22px 40vh;   /* generous bottom padding so the last block can scroll clear */
  font-size: 14.5px;
}
/* The pane is narrower than the main column, so pull the block gutter in —
   otherwise the ＋/⋮⋮ affordances hang off the edge. */
.split-editor .block-gutter { left: -34px; }
html[dir="rtl"] .split-editor .block-gutter { left: auto; right: -34px; }

/* Below this width a side-by-side split is not usable; hide the pane rather
   than let it squeeze the main column into a sliver. splitview.js keeps its
   state, so widening the window brings the pane straight back. */
@media (max-width: 900px) {
  .split-row { display: block; }
  .split-pane { display: none; }
}

/* Empty state inside the split-view page picker (reuses the palette shell). */
.modal-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text-faint, #8b8b96);
  text-align: center;
}