feat(maestro): replace spawn modal with draft panes (#62)

The draft pane covers every field the modal had; the modal was a second
code path for the same job. The header Spawn button, sidebar empty state,
welcome button, and ?mock&spawn now open a draft pane via
MultiView.openDraft — reusing an empty focused pane, else splitting it.
"Spawn similar" seeds a draft with the session's cwd + command.

Modal-only CSS (backdrop, sheet/dialog chrome, keyframes) is deleted;
.modal-body form styling folds into .spawn-form, which also picks up the
select styling the worktree branch picker was borrowing from the modal.

web/src/styles.css

@@ -1205,72 +1205,9 @@ textarea {
   border-color: var(--accent-strong);
 }
 
-/* ---------- modal ---------- */
+/* ---------- forms ---------- */
 
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: oklch(0.12 0.01 256 / 0.6);
-  backdrop-filter: blur(3px);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 0;
-  z-index: var(--z-modal);
-  animation: fade var(--dur) var(--ease-out);
-}
-
-@media (min-width: 600px) {
-  .modal-backdrop {
-    align-items: center;
-    padding: var(--sp-6);
-  }
-}
-
-.modal {
-  background: var(--surface);
-  border-radius: var(--r-3) var(--r-3) 0 0;
-  border: 1px solid var(--border);
-  width: 100%;
-  max-width: 560px;
-  max-height: 92vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--shadow-2);
-  animation: sheet-up var(--dur-slow) var(--ease-out);
-}
-
-@media (min-width: 600px) {
-  .modal {
-    border-radius: var(--r-3);
-    animation: pop var(--dur) var(--ease-out);
-  }
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sp-3);
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h2 {
-  margin: 0;
-  font-size: var(--fs-15);
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-2);
-}
-
-.modal-header h2::before {
-  content: "+";
-  color: var(--accent);
-  font-weight: 700;
-}
-
-.modal-body {
+.spawn-form {
   padding: var(--sp-3);
   overflow: auto;
   display: flex;
@@ -1280,7 +1217,6 @@ textarea {
   scrollbar-color: var(--border-strong) transparent;
 }
 
-.modal-body label,
 .spawn-form label {
   display: flex;
   flex-direction: column;
@@ -1290,7 +1226,6 @@ textarea {
   letter-spacing: 0.01em;
 }
 
-.modal-body label.row-inline,
 .spawn-form label.row-inline {
   flex-direction: row;
   align-items: center;
@@ -1300,10 +1235,9 @@ textarea {
   cursor: pointer;
 }
 
-.modal-body input[type="text"],
-.modal-body input[type="search"],
-.modal-body select,
-.spawn-form input[type="text"] {
+.spawn-form input[type="text"],
+.spawn-form input[type="search"],
+.spawn-form select {
   background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: var(--r-2);
@@ -1318,23 +1252,20 @@ textarea {
     background var(--dur-fast) var(--ease-out);
 }
 
-.modal-body input[type="text"]:hover,
-.modal-body select:hover,
-.spawn-form input[type="text"]:hover {
+.spawn-form input[type="text"]:hover,
+.spawn-form select:hover {
   border-color: var(--border-strong);
 }
 
-.modal-body input[type="text"]:focus,
-.modal-body input[type="search"]:focus,
-.modal-body select:focus,
-.spawn-form input[type="text"]:focus {
+.spawn-form input[type="text"]:focus,
+.spawn-form input[type="search"]:focus,
+.spawn-form select:focus {
   outline: none;
   border-color: var(--accent);
   background: var(--surface);
   box-shadow: 0 0 0 3px var(--accent-tint);
 }
 
-.modal-body input[type="checkbox"],
 .spawn-form input[type="checkbox"] {
   width: 18px;
   height: 18px;
@@ -1359,13 +1290,6 @@ textarea {
   font-size: var(--fs-13);
 }
 
-.modal-actions {
-  display: flex;
-  gap: var(--sp-2);
-  justify-content: flex-end;
-  margin-top: var(--sp-2);
-}
-
 .form-error {
   color: var(--danger);
   margin: 0;
@@ -1381,7 +1305,6 @@ textarea {
 
 /* ---------- spawn form: tiles + recents picker (#27) ---------- */
 
-.spawn-modal .field,
 .spawn-form .field {
   display: flex;
   flex-direction: column;
@@ -1611,7 +1534,7 @@ textarea {
 
 .dir-ac {
   position: fixed;
-  z-index: var(--z-toast); /* above the modal it completes within */
+  z-index: var(--z-toast); /* above the draft pane it completes within */
   margin: 0;
   padding: var(--sp-1);
   list-style: none;
@@ -1759,26 +1682,6 @@ textarea {
   }
 }
 
-@keyframes fade {
-  from {
-    opacity: 0;
-  }
-}
-
-@keyframes sheet-up {
-  from {
-    transform: translateY(16px);
-    opacity: 0;
-  }
-}
-
-@keyframes pop {
-  from {
-    transform: scale(0.98);
-    opacity: 0;
-  }
-}
-
 /* ---------- responsive ---------- */
 
 @media (max-width: 520px) {
@@ -2119,15 +2022,6 @@ textarea {
   flex: 1;
   min-width: 0;
   min-height: 0;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-strong) transparent;
-  /* The modal form got its stacking and padding from `.modal-body`; in a pane
-     the form is the host, so it carries them itself. */
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-  padding: var(--sp-3);
 }
 
 /* pane tools cluster (disconnect / split / close), top-right corner. The attach