/* Split panes — up to 4 simultaneous content panes via CSS Grid.
 *
 * Layout values driven by data-layout on #rvt-pane-grid:
 *   "1"     → single pane (default)
 *   "2H"    → 2 columns
 *   "2V"    → 2 rows
 *   "3-TR"  → left full-height; top-right + bottom-right
 *   "4"     → 2x2
 *
 * Each pane is .rvt-pane with data-slot="a"|"b"|"c"|"d". Body elements
 * inside use .rvt-pane-body (the focused pane's body also carries
 * id="main-content" so all existing AJAX nav code lands in the right place).
 */

#rvt-pane-grid {
  display: grid;
  height: 100%;
  width: 100%;
  background: var(--bg-0);
  /* `position: relative` is REQUIRED — gutter elements are
   * `position: absolute` and need this as their containing block.
   * Without it they fall back to the viewport, drifting onto the wrong
   * spot AND extending past the grid into the footer. */
  position: relative;
  /* Gap + padding kick in only when split — single-pane mode keeps the
   * layout flush with the surrounding chrome (no visual change for users
   * who never split). */
  gap: 0;
  padding: 0;
  transition: gap 120ms ease, padding 120ms ease;
}
#rvt-pane-grid:not([data-layout="1"]) {
  gap: 16px;
  padding: 16px;
}

/* Track sizes are CSS variables so Phase 4's gutter-drag can mutate them
 * via inline style. Defaults to equal halves; user drag updates the
 * --col-fr* / --row-fr* variables in fr units. */
#rvt-pane-grid {
  --col-fr1: 1fr;
  --col-fr2: 1fr;
  --row-fr1: 1fr;
  --row-fr2: 1fr;
}

/* Layout grid templates. Multi-row layouts (3-* and 4) use LONGHAND
 * properties — the `grid-template: <areas> / <cols> / <rows>` shorthand
 * isn't valid CSS, so browsers silently fell back to auto-sized rows
 * and a single oversized pane covered the others. */
#rvt-pane-grid[data-layout="1"]  { grid-template: "a" / 1fr; }
#rvt-pane-grid[data-layout="2H"] { grid-template: "a b" / var(--col-fr1) var(--col-fr2); }
#rvt-pane-grid[data-layout="2V"] {
  grid-template-areas: "a" "b";
  grid-template-columns: 1fr;
  grid-template-rows: var(--row-fr1) var(--row-fr2);
}
/* 3-pane layouts. Letter encodes geometry: LV = left-vertical-split,
 * RV = right-vertical, TH = top-horizontal, BH = bottom-horizontal. */
#rvt-pane-grid[data-layout="3-LV"] {
  grid-template-areas: "a b" "c b";
  grid-template-columns: var(--col-fr1) var(--col-fr2);
  grid-template-rows: var(--row-fr1) var(--row-fr2);
}
#rvt-pane-grid[data-layout="3-RV"] {
  grid-template-areas: "a b" "a c";
  grid-template-columns: var(--col-fr1) var(--col-fr2);
  grid-template-rows: var(--row-fr1) var(--row-fr2);
}
#rvt-pane-grid[data-layout="3-TH"] {
  grid-template-areas: "a b" "c c";
  grid-template-columns: var(--col-fr1) var(--col-fr2);
  grid-template-rows: var(--row-fr1) var(--row-fr2);
}
#rvt-pane-grid[data-layout="3-BH"] {
  grid-template-areas: "a a" "b c";
  grid-template-columns: var(--col-fr1) var(--col-fr2);
  grid-template-rows: var(--row-fr1) var(--row-fr2);
}
#rvt-pane-grid[data-layout="4"] {
  grid-template-areas: "a b" "c d";
  grid-template-columns: var(--col-fr1) var(--col-fr2);
  grid-template-rows: var(--row-fr1) var(--row-fr2);
}

.rvt-pane[data-slot="a"] { grid-area: a; }
.rvt-pane[data-slot="b"] { grid-area: b; }
.rvt-pane[data-slot="c"] { grid-area: c; }
.rvt-pane[data-slot="d"] { grid-area: d; }

.rvt-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bg-0);
  overflow: hidden;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

/* Single-pane mode: no border, no rounded corners — looks identical to
 * pre-split layout. */
#rvt-pane-grid[data-layout="1"] .rvt-pane {
  border-radius: 0;
  border-color: transparent !important;
}

/* Multi-pane: each pane gets a clear border so the split is visually
 * distinct, and a soft accent glow when focused. The strip's bottom
 * border becomes the pane's internal divider — no extra work needed. */
#rvt-pane-grid:not([data-layout="1"]) .rvt-pane {
  border-color: var(--border);
}
#rvt-pane-grid:not([data-layout="1"]) .rvt-pane.is-focused {
  border-color: var(--accent-glow);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}

/* Close-pane action — lives inside the per-pane tabs strip's actions
 * area (next to reopen + close-others). Hidden in single-pane mode so
 * the user can't accidentally remove their only pane. */
#rvt-pane-grid[data-layout="1"] .rvt-tabs-action--close-pane {
  display: none;
}

.rvt-pane-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  min-height: 0;
  /* min-width:0 lets the body shrink below its content's intrinsic width
   * inside the flex pane row — without it, a wide code block inside a
   * card could widen the whole pane and clip card right edges. */
  min-width: 0;
}

/* Drag-to-edge split overlays. While the user drags a tab, hovering it
 * over a pane body's right or bottom edge shows a translucent panel +
 * dashed accent border. Drop there to split that pane in that direction
 * with the dragged tab. The container is absolute-positioned within the
 * pane (which is `position: relative`), starting BELOW the tabs strip
 * (~40px). pointer-events: none so the cursor still hits the underlying
 * body (so dragover/drop events on the body keep firing). */
.rvt-pane-edge-hints {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9;
}
.rvt-pane-edge-hint {
  position: absolute;
  display: none;
  background: var(--accent-glow);
  border: 2px dashed var(--accent);
  border-radius: 6px;
  box-sizing: border-box;
}
.rvt-pane-edge-hint.is-active {
  display: block;
}
.rvt-pane-edge-hint--right  { right: 0; top: 0; bottom: 0; width: 50%; }
.rvt-pane-edge-hint--bottom { left: 0; right: 0; bottom: 0; height: 50%; }

/* Gutter resize handles (Phase 4). Drag to update --col-fr* / --row-fr*.
 *
 * Always-visible thin colored line so users can discover it; widens +
 * brightens to the accent on hover/drag for the "grab me" affordance.
 * JS positions them inline via `left` / `top`.
 *
 * The clickable hit area is wider than the visible line via a transparent
 * pseudo-element on each side (16px total grab zone for col, 16px for
 * row). The eye sees a 2px line; the hand can grab anywhere in 16px. */
.rvt-pane-gutter {
  position: absolute;
  z-index: 8;
  background: var(--border);
  transition: background 80ms ease;
}
.rvt-pane-gutter::before {
  content: '';
  position: absolute;
  inset: 0;
}
.rvt-pane-gutter--col {
  top: 16px; bottom: 16px;
  width: 2px;
  cursor: col-resize;
}
.rvt-pane-gutter--col::before {
  /* Wider invisible hit area for easier mouse capture. */
  top: 0; bottom: 0;
  left: -7px; right: -7px;
  cursor: col-resize;
}
.rvt-pane-gutter--row {
  left: 16px; right: 16px;
  height: 2px;
  cursor: row-resize;
}
.rvt-pane-gutter--row::before {
  left: 0; right: 0;
  top: -7px; bottom: -7px;
  cursor: row-resize;
}
.rvt-pane-gutter:hover,
.rvt-pane-gutter.is-dragging {
  background: var(--accent);
}
/* Slight thickening on hover for tactile feedback. The `translate(-50%)`
 * applied via JS keeps the gutter centered on the boundary even as
 * width changes, so no margin compensation is needed here. */
.rvt-pane-gutter--col:hover,
.rvt-pane-gutter--col.is-dragging { width: 4px; }
.rvt-pane-gutter--row:hover,
.rvt-pane-gutter--row.is-dragging { height: 4px; }

/* Right-click split menu — appears at cursor position over a tab. */
.rvt-split-menu {
  position: fixed;
  z-index: 1000;
  min-width: 160px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-0);
}
.rvt-split-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
}
.rvt-split-menu button:hover {
  background: var(--bg-3);
}
.rvt-split-menu button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.rvt-split-menu .rvt-split-menu-icon {
  display: inline-block;
  width: 18px;
  height: 14px;
  border: 1px solid var(--text-2);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.rvt-split-menu .rvt-split-menu-icon.right::after {
  content: '';
  position: absolute;
  inset: 0 0 0 50%;
  background: var(--accent);
  opacity: 0.5;
}
.rvt-split-menu .rvt-split-menu-icon.down::after {
  content: '';
  position: absolute;
  inset: 50% 0 0 0;
  background: var(--accent);
  opacity: 0.5;
}