The Page menu, Help, and the manual from the tooltips

The page and view commands are in a menu under "Page", with grey
titles over the display and size sections.  Help, at the far right,
shows a note for now; with Ctrl (Command on a Mac) held it shows the
explanations of every command in one text, alphabetical, wrapped at
80 columns, a shared name prefixed by its context.

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

client/kokkoja.css

@@ -108,23 +108,22 @@ h2 {
   background: var(--panel);
 }
 
-/* Three groups (Andy, 2026-10-11): the drawing tools with their settings
-   and Undo on the left; the page and the view in the middle, centred
-   between the other two; the session's buttons flush right.  The
-   drawing group keeps the width of its widest state (main.js sets its
-   min-width by measuring), so that the middle group stays put when the
-   tool changes. */
+/* Two groups since 2026-10-14 (three from 2026-10-11, when the page and
+   the view stood centred between them; those commands are in the Page
+   menu now): the drawing tools with their settings and Undo on the
+   left; the page and session buttons flush right, Help last.  The
+   drawing group and the settings keep the width of their widest state
+   (main.js sets their min-width by measuring), so that nothing after
+   them moves when the tool changes. */
 .drawing, .settings { display: flex; align-items: center; gap: 0.5rem 0.55rem; }
 /* Twice the gap before Eraser, Hide and Undo, so that with the pen the
    widest line and the Eraser read as two groups (Andy, 2026-10-11). */
 .drawing .after_settings { margin-left: 0.55rem; }
-.toolbar .page_view { margin-left: auto; margin-right: auto; }
 
 /* When the window is too narrow for one row, the tools are centred
    instead of standing at the two ends (Andy, 2026-10-09; main.js sets
    the class by measuring). */
 .toolbar.wrapped { justify-content: center; }
-.toolbar.wrapped .page_view { margin-left: 0; margin-right: 0; }
 .toolbar.wrapped .toolbar_right { margin-left: 0; justify-content: center; }
 
 /* 9rem wide until 2026-10-11: room for Undo.  The buttons' height, else
@@ -179,12 +178,12 @@ h2 {
 
 /* The palette that "+" opens: no system dialog, which crashes Firefox on
    Linux (Hollis, 2026-10-04). */
-.palette {
+/* A popup of Kokkoja's own below a toolbar button (no system menu or
+   dialog): the colour palette, the Page menu, the Help note.  main.js
+   places it, and closes it on a press elsewhere or Escape. */
+.popup {
   position: absolute;
   z-index: 5;
-  display: grid;
-  grid-template-columns: repeat(8, 1.5rem);
-  gap: 0.3rem;
   padding: 0.5rem;
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -192,6 +191,55 @@ h2 {
   box-shadow: 0 4px 16px rgb(0 0 0 / 0.2);
 }
 
+.palette {
+  display: grid;
+  grid-template-columns: repeat(8, 1.5rem);
+  gap: 0.3rem;
+}
+
+/* The Page menu: commands one below the other, read as a list, with a
+   line between the view, the page's size and the writing mode, and a
+   title over the first two in the muted grey of what cannot be pressed
+   (Andy, 2026-10-14: grey, not italics). */
+.menu { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem; min-width: 14rem; }
+.menu .menu_item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: auto;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.menu .menu_item:hover { background: var(--panel); border-color: var(--line); }
+.menu .menu_title { padding: 0.2rem 0.6rem 0.1rem; color: var(--muted); cursor: default; }
+.menu hr { width: 100%; margin: 0.2rem 0; border: 0; border-top: 1px solid var(--line); }
+.menu .toggle input { margin: 0; }
+
+.help_popup { padding: 0.8rem 1rem; }
+
+/* The generated manual (Ctrl-click on Help): the tooltips as Klammertext.
+   Its Copy button has a button's ordinary shape, not the close mark's
+   2rem; the text takes the focus when the window opens, so that the
+   keyboard scrolls it and no button's tooltip opens by itself. */
+.manual header h2 { flex: 1; min-width: 0; }
+.chooser header button.action { width: auto; padding: 0.35rem 0.8rem; margin-right: 0.5rem; font-size: inherit; line-height: normal; }
+.manual_text:focus { outline: 2px solid var(--line); outline-offset: 2px; }
+.manual_text {
+  margin: 0;
+  max-height: 70vh;
+  overflow: auto;
+  white-space: pre-wrap;
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
 .palette .swatch { width: 1.5rem; height: 1.5rem; }
 /* A colour already in the toolbar leaves its place in the grid empty. */
 .palette .swatch.missing { visibility: hidden; }
@@ -226,7 +274,7 @@ h2 {
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem 0.55rem;
-  margin-left: 0;   /* auto until 2026-10-11; the middle group's margins push it right now. */
+  margin-left: auto;   /* 0 from 2026-10-11 to 2026-10-14, when the middle group's margins pushed it right. */
   min-width: 0;
 }
 
@@ -599,7 +647,7 @@ button.mark.unavailable { opacity: 0.4; }
 
 .tooltip {
   position: fixed;
-  z-index: 10;
+  z-index: 6;
   max-width: 20rem;
   padding: 0.4rem 0.6rem;
   border-radius: 6px;