Arrange tool, and a hold that is easier to find

An Arrange tool marks the corners of every image, Hide and own text
rectangle in blue and moves or resizes them by a plain drag, a press
elsewhere doing nothing.  The hold that does the same with any tool is
shorter (450 ms), with more slack, and shows all four corners.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

client/kokkoja.css

@@ -277,19 +277,43 @@ h2 {
   box-sizing: border-box;
   border: 2px solid #2e7d32;
   pointer-events: none;
+  --handle-color: #2e7d32;
 }
 
+/* The four corners of a held object, and the corner being dragged, larger. */
+.handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  transform: translate(-50%, -50%);
+  background: var(--handle-color);
+}
+.handle.nw { left: 0; top: 0; }
+.handle.ne { left: 100%; top: 0; }
+.handle.sw { left: 0; top: 100%; }
+.handle.se { left: 100%; top: 100%; }
+
 .image_grip.corner::after {
   content: "";
   position: absolute;
   left: var(--corner-x);
   top: var(--corner-y);
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   transform: translate(-50%, -50%);
   background: #2e7d32;
 }
 
+/* The Arrange tool's cues: blue corners on everything that can be moved
+   or resized, and an outline on images, whose edges may not show. */
+.arrange_cues { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
+.arrange_cue {
+  position: absolute;
+  box-sizing: border-box;
+  --handle-color: #1e88e5;
+}
+.arrange_cue.image { border: 1px solid #1e88e5; }
+
 .page {
   position: relative;
   flex: none;