/* SplitViewWidget: two panes and the divider between them. The first pane's share comes from --na-split-first,
   which the widget sets; both panes stretch to the taller one. */
.na-split { display: flex; align-items: stretch; width: 100%; min-width: 0; }
.na-split__pane { display: flex; flex-direction: column; min-width: 0; }
.na-split__pane--first { flex: 0 1 var(--na-split-first, 50%); min-width: var(--na-split-min, 320px); }
.na-split__pane--second { flex: 1 1 0; min-width: var(--na-split-min, 320px); }

.na-split__handle { position: relative; flex: 0 0 1rem; cursor: col-resize; touch-action: none; outline: none; }
.na-split__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 3rem; transform: translate(-50%, -50%); border-radius: 2px; background: var(--cui-border-color, #d8dbe0); transition: height .15s, background-color .15s; }
.na-split__handle:hover::after,
.na-split__handle:focus-visible::after,
.na-split--dragging > .na-split__handle::after { height: 5rem; background: var(--cui-primary, #321fdb); }

.na-split--dragging { cursor: col-resize; user-select: none; }
.na-split--dragging iframe { pointer-events: none; }

/* One pane: the first takes the whole width. */
.na-split--single > .na-split__handle,
.na-split--single > .na-split__pane--second { display: none; }
.na-split--single > .na-split__pane--first { flex: 1 1 auto; }

/* Stacked: the panes under each other at full width, without a divider. */
.na-split--stacked { flex-direction: column; gap: 1rem; }
.na-split--stacked > .na-split__handle { display: none; }
.na-split--stacked > .na-split__pane { flex: 0 0 auto; min-width: 0; }