fix: harden array builder editing workflows

apps/array-builder/styles.css

@@ -3,6 +3,25 @@
   overflow-x: clip;
 }
 
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 8px;
+  left: 8px;
+  padding: 9px 12px;
+  border-radius: 9px;
+  color: #06130f;
+  background: var(--mint);
+  font-size: 0.72rem;
+  font-weight: 750;
+  text-decoration: none;
+  transform: translateY(-150%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
 .array-builder-header {
   position: sticky;
   z-index: 30;
@@ -116,6 +135,11 @@
   clip-path: inset(50%);
 }
 
+.file-button:focus-within {
+  border-color: var(--mint);
+  outline: 2px solid rgb(101 242 191 / 16%);
+}
+
 .array-workflow {
   min-width: 0;
   margin-left: auto;
@@ -169,6 +193,8 @@
 }
 
 .array-controls {
+  grid-column: 1;
+  grid-row: 1;
   position: sticky;
   top: 59px;
   min-width: 0;
@@ -185,6 +211,8 @@
 }
 
 .array-builder-layout > .split-handle {
+  grid-column: 2;
+  grid-row: 1;
   position: sticky;
   top: 59px;
   height: calc(100vh - 59px);
@@ -577,7 +605,13 @@ details > summary::-webkit-details-marker {
   padding: 0 10px 10px;
 }
 
+.mobile-save-actions {
+  display: none;
+}
+
 .array-workspace {
+  grid-column: 3;
+  grid-row: 1;
   min-width: 0;
   padding: 18px clamp(18px, 2.5vw, 38px) 38px;
 }
@@ -857,41 +891,60 @@ body[data-array-tool="add"] #array-canvas,
 
 @media (max-width: 1100px) {
   .array-builder-layout {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
   }
 
   .array-builder-layout > .split-handle {
     display: none;
   }
 
+  .array-controls {
+    grid-column: 1;
+  }
+
+  .array-workspace {
+    grid-column: 2;
+  }
+
   .array-controls,
   .array-workspace {
     width: 100%;
     min-width: 0;
   }
 
-  .array-controls {
-    position: static;
-    overflow: visible;
-    max-height: none;
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
-  }
-
   .microphone-list {
     max-height: 360px;
   }
 }
 
 @media (max-width: 760px) {
+  .array-builder-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .array-builder-header {
     position: static;
     flex-wrap: wrap;
     gap: 10px;
   }
 
+  .array-workspace {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .array-controls {
+    grid-column: 1;
+    grid-row: 2;
+    position: static;
+    overflow: visible;
+    max-height: none;
+    border-right: 0;
+    border-top: 1px solid var(--line);
+    border-bottom: 0;
+  }
+
   .array-workflow {
-    order: 3;
     width: 100%;
     margin: 0;
   }
@@ -935,11 +988,17 @@ body[data-array-tool="add"] #array-canvas,
 
   #array-canvas {
     height: 500px;
+    touch-action: pan-y;
   }
 
   .shortcut-help > div {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .mobile-save-actions {
+    display: block;
+    padding: 2px 0 16px;
+  }
 }
 
 @media (max-width: 520px) {