Graph calculator improvmentes

frontend/app/assets/css/_book.scss

@@ -269,6 +269,32 @@
   &:hover { color: var(--text); background: var(--surface-2); }
 }
 
+// ---------- A wiki page laid on the book ----------
+// The link map and the graphing calculator are pages too: the search popup
+// lays one of them on the book beside the articles (ToolPane.vue). It fills
+// the page edge to edge — no column of prose scrolls here, the surface keeps
+// its own docks and toolbars — and it takes the whole share of the desk, a
+// plane being no narrower read than a page of text. Each stage's own sheet
+// answers for the rest (_graph.scss, _calculator.scss).
+
+.book-pane.pane-tools {
+  max-width: none;
+  overflow: hidden;
+}
+
+.pane-stage {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+// the surface's mark on the spine, under the ×, so a page of the map or the
+// plane reads as itself fanned in among the articles
+.pane-spine .spine-glyph { flex: none; opacity: 0.65; }
+
+.book-pane.active .pane-spine .spine-glyph { opacity: 1; }
+
 @media (max-width: 900px) {
   .book-layer, .reader-note { inset: 0; box-shadow: none; }
 

frontend/app/assets/css/_calculator.scss

@@ -115,6 +115,12 @@
   font: italic 0.95rem/1 'Computer Modern', Georgia, serif;
 }
 
+// a relation or point carries no lone "y =", so it sheds the gutter and the
+// input takes back the room it stood in
+.calc-input-box.bare .calc-input {
+  padding-left: 10px;
+}
+
 .calc-input {
   flex: 1;
   min-width: 0;
@@ -125,8 +131,6 @@
   color: var(--text);
   font: 0.95rem/1.2 'Computer Modern', Georgia, serif;
 
-  &::placeholder { color: var(--faint); opacity: 0.75; }
-
   &.input-error { color: var(--danger); }
 }
 
@@ -246,3 +250,40 @@
   // width back at once rather than after the slide
   .calc-dock-leave-active { position: absolute; left: 0; right: 0; }
 }
+
+// ---------- Laid on a page of the book (ToolPane) ----------
+// A pane of the book is a full surface again, at any screen width: the plane
+// fills the page and the input dock pins to its edge as on the desktop, and
+// the fold above — panels of the plain /calculator page — does not reach
+// into the pane.
+
+.pane-stage .calc-stage {
+  position: absolute;
+  inset: 0;
+  display: block;
+  background: var(--bg);
+}
+
+.pane-stage .plot-wrap {
+  position: absolute;
+  width: auto;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+}
+
+.pane-stage .calc-dock {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: clamp(260px, 24vw, 320px);
+  margin: 0;
+  border: 0;
+  border-right: 1px solid var(--border);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+}

frontend/app/assets/css/_graph.scss

@@ -120,3 +120,30 @@
 
   .graph-state { position: static; display: block; padding: 8px 0 32px; }
 }
+
+// ---------- Laid on a page of the book (ToolPane) ----------
+// A pane of the book is a full surface again, at any screen width: the map
+// fills the page the way it fills the desk, and the fold above — panels of
+// the plain /graph page — does not reach into the pane.
+
+.pane-stage .graph-stage {
+  position: absolute;
+  inset: 0;
+  background: var(--bg);
+}
+
+.pane-stage .graph-canvas-wrap {
+  position: absolute;
+  height: auto;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.pane-stage .graph-state {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  padding: 24px;
+}

frontend/app/assets/css/_search.scss

@@ -117,6 +117,17 @@
   }
 }
 
+// the wiki's own pages carry their mark beside the title, so a row reads as
+// the surface it opens rather than an article
+.sr-page-glyph {
+  display: inline-block;
+  margin-right: 7px;
+  color: var(--muted);
+  vertical-align: -2px;
+
+  svg { display: block; }
+}
+
 .sr-meta {
   display: flex;
   align-items: center;