Undo, and the toolbar in three groups

Undo takes back one's own latest mark, by the button, Ctrl+Z or two
quick taps of the eraser; the toolbar's drawing tools, the page and
view, and the session stand in three groups that do not move when the
tool changes; the buttons are a little smaller.

client/index.html

@@ -40,16 +40,14 @@
 
 <div id="session" hidden>
   <header class="toolbar">
+    <div id="drawing" class="drawing" aria-label="Drawing">
     <div class="group" role="radiogroup" aria-label="Tool">
       <button type="button" data-tool="pen" aria-pressed="true"
               data-help="Write on the page. Only your own writing can be erased.">Pen</button>
       <button type="button" data-tool="text" aria-pressed="false"
               data-help="Type on the page. Tap where the text should begin, or drag open a rectangle: a red box, white inside, in which the text wraps and which grows downward as you type. Tap your own text to change it; rest the pen on it to move it, or near a corner of a box to resize it.">Text</button>
-      <button type="button" data-tool="eraser" aria-pressed="false"
-              data-help="Erase your own strokes and text by moving over them. A tap on an image, or on a Hide rectangle, removes it, if you are the host or a co-host (or added the image yourself).">Eraser</button>
-      <button type="button" data-tool="hide" aria-pressed="false" hidden
-              data-help="Hide part of the page for everyone: drag open a rectangle, and what lies under it is covered in white, marked by blue corners. Rest the pen on it to move it, or near a corner to resize it; a tap of the eraser removes it.">Hide</button>
     </div>
+    <div id="settings" class="settings">
     <div class="group" id="colors" role="radiogroup" aria-label="Color">
       <button id="more_colors" type="button" class="swatch more"
               data-help="Choose another color. It is added here.">+</button>
@@ -65,7 +63,17 @@
       <input id="text_size" type="number" min="6" max="100" step="1" value="14"
              aria-label="Text size in points" data-help="Text size in points.">
     </div>
-    <div class="group" aria-label="View">
+    </div>
+    <div class="group after_settings" role="radiogroup" aria-label="Hide and Eraser">
+      <button type="button" data-tool="hide" aria-pressed="false" hidden
+              data-help="Hide part of the page for everyone: drag open a rectangle, and what lies under it is covered in white, marked by blue corners. Rest the pen on it to move it, or near a corner to resize it; a tap of the eraser removes it.">Hide</button>
+      <button type="button" data-tool="eraser" aria-pressed="false"
+              data-help="Erase your own strokes and text by moving over them. A tap on an image, or on a Hide rectangle, removes it, if you are the host or a co-host (or added the image yourself). Two quick taps on empty paper, away from anything the eraser would remove, undo your latest mark; again, and the one before.">Eraser</button>
+    </div>
+      <button id="undo" type="button" disabled
+              data-help="Take back your latest mark: a stroke, an erasure, a text block typed or moved, a Hide rectangle. Again for the one before. Also Ctrl+Z (Command+Z on a Mac), or two quick taps of the eraser on empty paper. Only your own marks, and only on this page since you opened it.">Undo</button>
+    </div>
+    <div class="group page_view" aria-label="Page and view">
       <button id="zoom_fit" type="button"
               data-help="Show the whole page in the window. Pressed by the host, it does so on every screen. Ctrl (Command on a Mac) with the scroll wheel, or with a pen stroke up or down, zooms about the pointer.">Fit</button>
       <button id="zoom_sheet" type="button"