.frame {
  position: relative; /* anchors the drag handles, which straddle column borders */
  display: grid;
  grid-template-rows: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dsw-alias-bg-base);
}

.sidebarCol {
  min-width: 0;
  overflow: hidden;
  background: var(--dsw-specific-sidebar-fill);
  border-right: 1px solid var(--dsw-alias-border-l1);
}

.centerCol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detailsCol {
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--dsw-alias-border-l2);
}

/* Collapsed columns keep children mounted; the border must not paint a 1px seam.
   Flags live on the frame — DetailsColumn renders inside the provider body and
   does not know its own width. */
.frame[data-sidebar-collapsed] .sidebarCol {
  border-right: none;
}

.frame[data-details-collapsed] .detailsCol {
  border-left: none;
}

/* Drag handles are frame children (columns clip overflow): an 8px hit strip
   centered on the column border via inline left, above column content. The
   visible pill (12x32 r10, riding the border at vertical center) is the figma
   Handle component; the hit strip stays wider than the pill. */
.handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  margin-left: -4px;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
}

.handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 32px;
  border-radius: 10px;
  box-sizing: border-box;
  background: var(--dsw-alias-bg-layer-2);
  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
}

.handle:hover::after,
.handle[data-dragging='true']::after {
  border-color: var(--dsw-alias-border-l3);
}
