/* Split view: two sides with a divider; the side in use has an accent page border. */

.panes {
  position: relative;
  display: flex;
  flex: 1;
  gap: 2px;
  min-width: 0;
  min-height: 0;
}

.panes > .sheet { flex: 1 1 0; min-width: 0; }
/* the right side's set width never squeezes the left below its minimum when the window narrows */
.panes > .sheet-right { max-width: calc(100% - 268px); }

.splitdiv {
  position: relative;
  flex: none;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

/* an always-visible rule down the middle, lit while dragging or hovered */
.splitdiv::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
  content: "";
  transition: background .12s;
}

.splitdiv.active::after,
.splitdiv:focus-visible::after { background: var(--accent); }

@media (hover: hover) {
  .splitdiv:hover::after { background: var(--accent); }
}

.panes.split .sheet.pane-on .page { border-color: var(--accent); }
.panes.split .sheet:not(.pane-on) .tab[aria-selected="true"] { color: var(--muted); }
.tab-extra { display: contents; }
/* split / close split: a solid tab-style button at the end of the row */
.tab-add.split-btn {
  margin-left: auto;
  padding: 0 10px;
  border-style: solid;
  border-bottom-width: 2px;
  background: var(--tab);
  color: color-mix(in srgb, var(--fg) 75%, var(--muted));
  transition: border-color .12s, color .12s;
}

.tab-add.split-btn:active { transform: translateY(1px); }
@media (hover: hover) {
  .tab-add.split-btn:hover { border-color: var(--accent); color: var(--accent); }
}

@media (max-width: 700px), (hover: none) {
  .split-btn { display: none; }
}
.sheet-right .side-btn { display: none; }