Fix hooks.

src/style.css

@@ -38,10 +38,57 @@
   color: #f0ecf8;
 }
 
-.playpen-list > row:selected image {
+/* The kind icon picks up the accent on the current row. The status dot is
+   excluded: it carries a colour that *is* the information, and this rule is
+   specific enough to beat the state classes, which used to leave the selected
+   row's dot accent-coloured whatever it was trying to say. */
+.playpen-list > row:selected image:not(.playpen-status-dot) {
   color: #b29df5;
 }
 
+/* State on the row itself, not just on its dot.
+
+   A bar down the leading edge and a wash behind the whole row, both in the
+   state's colour. The dot says what a row is doing once you are reading it;
+   these are what let you sweep a sidebar of a dozen tabs and land on the one
+   that wants you without reading any of them.
+
+   The bar is an inset shadow rather than a real border because a border takes
+   part in layout: 3px of it would shove every label sideways as a tab changed
+   state, and a sidebar that twitches is worse than one that is hard to read.
+
+   These come after the :selected rules deliberately. Equal specificity means
+   source order decides, and a state outranks "this is the tab you are on". */
+.playpen-list > row.playpen-attn-busy {
+  box-shadow: inset 3px 0 0 #b29df5;
+}
+
+/* No wash for working. It is the most common state by far, and a sidebar where
+   half the rows are tinted all afternoon teaches you to stop looking. */
+.playpen-list > row.playpen-attn-done {
+  box-shadow: inset 3px 0 0 #7ddc9a;
+  background-color: rgba(125, 220, 154, 0.13);
+}
+
+.playpen-list > row.playpen-attn-input {
+  box-shadow: inset 3px 0 0 #f0c069;
+  background-color: rgba(240, 192, 105, 0.13);
+}
+
+.playpen-list > row.playpen-attn-failed {
+  box-shadow: inset 3px 0 0 #f2a0a0;
+  background-color: rgba(242, 160, 160, 0.13);
+}
+
+/* The current row keeps its own background: the wash and the selection would
+   otherwise blend into a colour that reads as neither. The bar survives, which
+   is the part that carries the state. */
+.playpen-list > row:selected.playpen-attn-done,
+.playpen-list > row:selected.playpen-attn-input,
+.playpen-list > row:selected.playpen-attn-failed {
+  background-color: #342c4a;
+}
+
 /* Keep the close button unobtrusive until the row is hovered or current. */
 .playpen-close {
   opacity: 0;
@@ -137,7 +184,7 @@
    are picked to survive that: amber and red carry the two states that actually
    want you, and they are the only warm colours anywhere in the window. */
 .playpen-status-dot {
-  -gtk-icon-size: 8px;
+  -gtk-icon-size: 11px;
   opacity: 0;
 }
 
@@ -230,6 +277,46 @@
   opacity: 0.55;
 }
 
+/* State on a pane's own frame, so a tab full of splits says which pane is
+   asking without being read pane by pane.
+
+   Only the three states that are news get a border. Working deliberately does
+   not: it is the resting state of every pane you have set going, and colouring
+   the frame for it would leave the whole view repainting itself all afternoon
+   while saying nothing you did not already know. Its pulsing dot is enough.
+
+   After `.active` and `.zoomed` in source order, so a state outranks both —
+   they say where you are, which you know, and this says what happened, which
+   you don't. `.dragging` still wins over all of it, further down: while you are
+   moving a pane, feedback about the move is the only thing that matters. */
+.playpen-pane.playpen-attn-done {
+  border-color: #7ddc9a;
+}
+
+.playpen-pane.playpen-attn-input {
+  border-color: #f0c069;
+}
+
+.playpen-pane.playpen-attn-failed {
+  border-color: #f2a0a0;
+}
+
+/* The header carries a wash of the same colour. The border alone is a hairline
+   around a large shape; the header is a solid band right next to the dot and
+   the title, which is what makes a pane readable at a glance in a four-way
+   split. */
+.playpen-pane.playpen-attn-done .playpen-pane-header {
+  background-color: rgba(125, 220, 154, 0.12);
+}
+
+.playpen-pane.playpen-attn-input .playpen-pane-header {
+  background-color: rgba(240, 192, 105, 0.12);
+}
+
+.playpen-pane.playpen-attn-failed .playpen-pane-header {
+  background-color: rgba(242, 160, 160, 0.12);
+}
+
 /* The pane being dragged. There is no separate drop indicator: the layout
    rearranges live during the drag, so the view itself is the preview. */
 .playpen-pane.dragging {