Merge remote-tracking branch 'origin/main' into tranquillo-nocturne

web/src/styles.css

@@ -876,6 +876,113 @@ input.leaf-rename:focus {
   background: var(--danger-tint);
 }
 
+/* ---------- help overlay (`?`) ---------- */
+.help-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: grid;
+  place-items: center;
+  padding: var(--sp-4);
+  background: oklch(0 0 0 / 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.help-panel {
+  width: min(440px, 100%);
+  max-height: min(80vh, 640px);
+  overflow-y: auto;
+  padding: var(--sp-4);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--r-3);
+  box-shadow: var(--shadow-2);
+}
+
+.help-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-3);
+}
+
+.help-title {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--fs-15);
+  color: var(--ink);
+}
+
+.help-close {
+  appearance: none;
+  background: none;
+  border: 0;
+  border-radius: var(--r-2);
+  color: var(--muted);
+  font: inherit;
+  line-height: 1;
+  padding: var(--sp-1) var(--sp-2);
+  cursor: pointer;
+}
+
+.help-close:hover,
+.help-close:focus-visible {
+  background: var(--surface-3);
+  color: var(--ink);
+  outline: none;
+}
+
+.help-group + .help-group {
+  margin-top: var(--sp-4);
+}
+
+.help-group-title {
+  margin: 0 0 var(--sp-2);
+  font-size: var(--fs-11);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.help-list {
+  margin: 0;
+}
+
+/* Keycaps in a fixed column so the descriptions line up down the list. */
+.help-row {
+  display: grid;
+  grid-template-columns: 14ch 1fr;
+  align-items: baseline;
+  gap: var(--sp-3);
+  padding: var(--sp-1) 0;
+}
+
+.help-keys {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--sp-1);
+  margin: 0;
+}
+
+.help-keys kbd {
+  font-family: var(--font-mono);
+  font-size: var(--fs-11);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: var(--r-1);
+  padding: 1px 6px;
+  color: var(--ink);
+}
+
+.help-desc {
+  margin: 0;
+  font-size: var(--fs-13);
+  color: var(--muted);
+}
+
 /* Line 2 — dot + duration in the state's colour, then muted fragments. The
    state word itself is never spelled out here; the colour carries it. */
 .card-line2 {
@@ -2146,7 +2253,7 @@ input.leaf-rename:focus {
 .mv-canvas > .mv-split,
 .mv-canvas > .mv-pane {
   position: absolute;
-  inset: var(--sp-2);
+  inset: 0;
 }
 .mv-canvas > .content-welcome {
   position: absolute;
@@ -2234,20 +2341,10 @@ input.leaf-rename:focus {
   min-width: 0;
   min-height: 0;
 }
-/* per-session colour strip — maps a pane to its sidebar row */
-.mv-pane::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: 2px;
-  background: var(--mv-color, transparent);
-  z-index: 3;
-  pointer-events: none;
-}
-/* focused pane: accent ring + glow, full strength */
+/* focused pane: accent ring, full strength */
 .mv-pane.is-focused {
   border-color: var(--accent);
-  box-shadow: inset 0 0 0 1px var(--accent), 0 0 22px -8px var(--accent-ring);
+  box-shadow: inset 0 0 0 1px var(--accent);
 }
 /* unfocused panes recede so the eye finds the live one */
 .mv-pane:not(.is-focused) {
@@ -2350,31 +2447,12 @@ input.leaf-rename:focus {
   border-radius: var(--r-1);
 }
 
-/* sidebar two-tier highlight + colour dot (issue #33).
+/* sidebar two-tier highlight (issue #33).
    .is-active = focused pane (loud, from existing rule); .is-open = open
-   elsewhere (quiet). The dot uses the session's colour so a row maps to a pane. */
+   elsewhere (quiet). */
 .tree-leaf.is-open {
   background: color-mix(in oklab, var(--accent) 6%, transparent);
 }
-.tree-leaf.is-open::after,
-.tree-leaf.is-active::after {
-  content: "";
-  position: absolute;
-  right: 9px;
-  top: 50%;
-  width: 7px;
-  height: 7px;
-  margin-top: -3.5px;
-  border-radius: 50%;
-  background: var(--mv-color, var(--accent));
-  pointer-events: none;
-}
-.tree-leaf.is-open::after {
-  opacity: 0.7;
-}
-.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
@@ -2386,7 +2464,6 @@ input.leaf-rename:focus {
 
 .mv-mobile {
   position: absolute;
-  /* Flush to the edges — a single full-screen pane needs no canvas inset. */
   inset: 0;
   display: flex;
   flex-direction: column;
@@ -2420,14 +2497,6 @@ input.leaf-rename:focus {
   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);