/* part: split — two panes and a draggable divider.
 *
 * USE WHEN: two regions the reader should be able to resize. Nest for three or more.
 * NEEDS: nothing
 *
 * ADD: paste this into the page, then run `make theme bake`.
 *   <div class="split-pane horizontal" data-split data-size="1" data-min=".3" data-max="3">
 *     <div class="split-first">…</div>
 *     <div class="split-divider"></div>
 *     <div class="split-second">…</div>
 *   </div>
 *
 * Derived from common/ui/src/components/SplitPane.vue. Used by every consumer:
 * mpr 7 sites, mts 4, unt and nvi one each.
 *
 * TOKENS: --text-dim
 *
 * Needs split.js for the drag. Without it the CSS still lays the panes out —
 * the divider is simply inert, which is the right failure: a page with no
 * script gets a fixed split, not a broken one.
 *
 * MARKUP
 *   <div class="split-pane horizontal" data-split data-size="1.4"
 *        data-min="0.4" data-max="4">
 *     <div class="split-first">…</div>
 *     <div class="split-divider"></div>
 *     <div class="split-second">…</div>
 *   </div>
 *
 * WHAT WAS LEFT OUT, and why — measured across all four consumers:
 *   `resizable={false}`  passed by nobody, ever. A page that wants a fixed
 *                        split omits the divider element.
 *   `anchor="second"`    kept: one real user (mpr App.vue:199), three lines.
 *   px mode              kept: mpr uses it, mts does not.
 *
 * The SFC's `> :deep(*) { width:100%; height:100% }` becomes a plain child
 * selector here. Same rule, no scoping compiler.
 */

.split-pane {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.split-pane.horizontal {
  flex-direction: row;
}

.split-pane.vertical {
  flex-direction: column;
}

.split-first,
.split-second {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

/* Children fill their pane. */
.split-first > *,
.split-second > * {
  width: 100%;
  height: 100%;
}

.split-divider {
  flex-shrink: 0;
  background: transparent;
  transition: background 0.15s;
  touch-action: none;
  z-index: 10;
}

.split-divider:hover,
.split-divider.dragging {
  background: var(--text-dim);
}

.split-pane.horizontal > .split-divider {
  width: 4px;
  cursor: col-resize;
  margin: 0 -2px;
}

.split-pane.vertical > .split-divider {
  height: 4px;
  cursor: row-resize;
  margin: -2px 0;
}