/* Resizable two-pane workspaces (split-pane.js). A workspace sets --split-ratio,
   --split-min-start, --split-min-end and --split-step, and switches the split on
   with grid-template-columns: var(--split-columns) inside its own breakpoint. The
   track formula keeps both minimums while the window resizes, without script. */
[data-split-pane] {
  --split-handle-size: 18px;
  --split-columns: clamp(var(--split-min-start), calc((100% - var(--split-handle-size)) * var(--split-ratio)), calc(100% - var(--split-handle-size) - var(--split-min-end))) var(--split-handle-size) minmax(0, 1fr);
}
.split-pane-handle { display: none; position: relative; cursor: col-resize; touch-action: none; border-radius: 6px; outline: none; }
.split-pane-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: transparent; transition: background .12s ease; }
.split-pane-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 36px; margin: -18px 0 0 -2px; border-radius: 4px; background: var(--border-firm); }
.split-pane-handle:hover::before, .is-resizing > .split-pane-handle::before { background: var(--skip); }
.split-pane-handle:focus-visible::before { background: var(--focus-ring); }
.split-pane-handle:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.is-resizing { cursor: col-resize; user-select: none; }

/* Suite builder: the run details are what is watched, so they get most of the
   room. The panes stack at the same width as .panes in studio.css. */
#suite-workspace .panes { --split-ratio: .35; --split-min-start: 260px; --split-min-end: 420px; --split-step: .02; }
@media not all and (max-width: 1150px) {
  #suite-workspace .panes[data-split-pane] { grid-template-columns: var(--split-columns); column-gap: 0; }
  #suite-workspace .panes[data-split-pane] > .split-pane-handle { display: block; }
}