fix: make the app actually usable on a phone

The worst of it: the ghost-log HUD is a fixed 300px panel pinned bottom-left
on every route. On a 390px screen it covered the seance ask-field and its
buttons outright — you could not reach the input to type a question. It now
collapses, and spans the width instead of blocking it under 560px.

- 16 uses of `100vh` meant every page was taller than iOS Safari's visible
  viewport, hiding the last row behind the toolbar. Now `100dvh` with the
  `100vh` line kept first as the fallback.
- Six inputs under 16px triggered iOS zoom-on-focus, which never zooms back
  out — you were left panning a zoomed layout after tapping login. All six
  at 16px, plus a global floor.
- No safe-area insets existed anywhere, so enabling viewport-fit=cover
  would have put content under the notch and home indicator. Added,
  including the fixed-position shells that ignore body padding.
- The codex voice table forced horizontal page scroll; it scrolls in its
  own container now.
- Tap targets under 44px raised, including a transcript replay button that
  was ~20x14px and named only by a `title` tooltip, which touch never shows.

Decorative micro-labels left alone deliberately — bumping them wholesale
would reintroduce the overflow this fixes.

README: the documented test command cannot work. conftest APPENDS `_test`,
so the documented DATABASE_URL derived `quantumancy_test_test` and errored
every test at setup. Corrected, with the two guards explained. Test counts
were stale (328/366 -> 403/385).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/components/GhostLog.css

@@ -7,12 +7,14 @@
 
 .ghost-log {
   position: fixed;
-  left: 14px;
-  bottom: 14px;
+  left: calc(14px + var(--qm-safe-left, 0px));
+  /* Clears the iPhone home indicator instead of sitting under it. */
+  bottom: calc(14px + var(--qm-safe-bottom, 0px));
   z-index: 500; /* above page content, below the global CRT glass (9999) and haunting layer (9998) */
   width: 300px;
-  max-width: calc(100vw - 28px);
+  max-width: calc(100vw - 28px - var(--qm-safe-left, 0px) - var(--qm-safe-right, 0px));
   max-height: 46vh;
+  max-height: 46dvh;
   display: flex;
   flex-direction: column;
   background: var(--qm-panel, rgba(16, 16, 26, 0.85));
@@ -54,7 +56,7 @@
   display: flex;
   align-items: center;
   gap: 0.45rem;
-  padding: 0.55rem 1rem 0.35rem;
+  padding: 0.55rem 0.5rem 0.35rem 1rem;
 }
 
 .ghost-log-glyph {
@@ -256,3 +258,57 @@
     animation: none;
   }
 }
+
+
+/* --- collapse control ---------------------------------------------------
+   The HUD is fixed over the bottom-left of every page. On a desktop that is
+   dead space; on a 390px phone it lands squarely on top of the séance
+   ask-field, so there has to be a touch-reachable way to get it out of the
+   way. */
+
+.ghost-log-toggle {
+  margin-left: auto;
+  flex: 0 0 auto;
+  /* 44x44 — Apple's HIG floor. The glyph is small; the target is not. */
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: rgba(124, 255, 178, 0.7);
+  font-size: 0.9rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ghost-log-toggle:active {
+  color: var(--qm-green, #7cffb2);
+}
+
+/* Collapsed: header only, so the log is a small tab rather than a panel. */
+.ghost-log--collapsed {
+  max-height: none;
+}
+
+/* --- phones -------------------------------------------------------------
+   A 300px panel on a 390px screen covers most of the width. Span the full
+   width instead (minus the same gutter), cap the height lower so it never
+   eats the screen, and keep every row readable. */
+@media (max-width: 560px) {
+  .ghost-log {
+    left: calc(8px + var(--qm-safe-left, 0px));
+    right: calc(8px + var(--qm-safe-right, 0px));
+    bottom: calc(8px + var(--qm-safe-bottom, 0px));
+    width: auto;
+    max-width: none;
+    max-height: 32vh;
+    max-height: 32dvh;
+  }
+
+  .ghost-log-status,
+  .ghost-log-body {
+    font-size: 0.85rem;
+  }
+}