Add tab re-ordering.

src/style.css

@@ -174,6 +174,36 @@ button.playpen-header-button:hover,
   background-color: @pp_row_selected;
 }
 
+/* The row being dragged, left dimmed and accented where it currently sits. As
+   with a pane there is no separate drop indicator: the sidebar reorders live
+   during the drag, so the list itself is the preview and this only has to say
+   which row is the one on the move.
+
+   Last of the row rules, so it wins over both the selection and the state
+   washes. While you are moving a tab, where it is going is the only thing you
+   are looking for. */
+.playpen-list > row.dragging {
+  opacity: 0.65;
+  background-color: alpha(@pp_accent_strong, 0.18);
+  box-shadow: inset 3px 0 0 @pp_accent_strong;
+}
+
+/* The copy of that row travelling with the pointer, which GTK draws into a
+   surface of its own. What it paints is the row's *box* — the icon, the label
+   and the close button — and a row's background belongs to the row above that
+   box, so without this the label would float on nothing. Given the selected
+   row's background it reads as the row lifted off the list, which is what it
+   is.
+
+   Qualified by a class the window puts on this drag's icon, because the `dnd`
+   node belongs to every drag icon in the app: unqualified, this would also
+   repaint the one a pane drag carries. */
+dnd.playpen-tab-drag {
+  background-color: @pp_row_selected;
+  color: @pp_text;
+  border-radius: 8px;
+}
+
 /* Keep the close button unobtrusive until the row is hovered or current. */
 .playpen-close {
   opacity: 0;