feat(maestro): mobile multi-view — tabs-only projection + sidebar drawer

Below 860px the split tree projects to a one-pane-at-a-time pill strip (no
splits/drag/resize — desktop only); the tree is untouched so widening restores
the splits. Only the visible pane's session stays live; the rest park. The
sidebar becomes an off-canvas drawer toggled by a ☰ in the tab bar, with a
backdrop; tapping a session opens it and closes the drawer. Re-renders on the
breakpoint crossing without losing sessions.

Closes #35. Part of epic #37.

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

web/src/styles.css

@@ -2217,3 +2217,111 @@ textarea {
 .tree-leaf.is-active::after {
   box-shadow: 0 0 8px var(--mv-color, var(--accent-ring));
 }
+
+/* =========================================================================
+   multi-view mobile (#35): below 860px the split tree projects to a pill strip
+   with one pane visible; the sidebar becomes an off-canvas drawer (☰).
+   ========================================================================= */
+.mv-mobile-menu {
+  display: none; /* desktop: hidden — the sidebar is always present */
+}
+.mv-backdrop {
+  display: none;
+}
+
+.mv-mobile {
+  position: absolute;
+  inset: var(--sp-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.mv-panebar {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex: none;
+}
+.mv-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 7px var(--sp-3);
+  border-radius: var(--r-1);
+  background: var(--surface-2);
+  color: var(--muted);
+  font: 600 var(--fs-12) / 1 var(--font-mono);
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.mv-pill::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--mv-color, var(--faint));
+  flex: none;
+}
+.mv-pill.is-active {
+  background: var(--accent-tint);
+  color: var(--accent-strong);
+  border-color: var(--accent-ring);
+}
+.mv-mobile > .mv-pane {
+  flex: 1;
+  min-height: 0;
+}
+
+@media (max-width: 859px) {
+  /* ☰ lives in the tab bar */
+  .mv-mobile-menu {
+    display: inline-grid;
+    place-items: center;
+    align-self: center;
+    width: 28px;
+    height: 28px;
+    margin-right: var(--sp-1);
+    border: none;
+    border-radius: var(--r-1);
+    background: transparent;
+    color: var(--ink);
+    font-size: var(--fs-15);
+    cursor: pointer;
+    flex: none;
+  }
+  .mv-mobile-menu:hover {
+    background: var(--surface-2);
+  }
+
+  /* sidebar → off-canvas drawer (override the route-based show/hide) */
+  .app-shell > .sidebar {
+    display: flex !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(82vw, 320px);
+    z-index: var(--z-modal);
+    transform: translateX(-100%);
+    transition: transform var(--dur) var(--ease-out);
+    box-shadow: var(--shadow-2);
+    border-right: 1px solid var(--border);
+  }
+  .app-shell.drawer-open > .sidebar {
+    transform: none;
+  }
+  /* content always visible (the layout/projection); drawer floats over it */
+  .app-shell[data-route="catalog"] > .content,
+  .app-shell > .content {
+    display: flex;
+  }
+  .app-shell.drawer-open > .mv-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-backdrop);
+    background: oklch(0 0 0 / 0.5);
+  }
+}