Metric Correlations

ui/styles.css

@@ -1137,6 +1137,92 @@ button.metrics-tf.thin-history:not(.active) {
   scroll-behavior: auto;
 }
 
+.metrics-mc-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+  margin: 0 0 8px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
+  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
+  flex-shrink: 0;
+}
+
+.metrics-mc-bar.hidden {
+  display: none;
+}
+
+.metrics-mc-hint {
+  flex: 1 1 180px;
+  font-size: 12px;
+  min-width: 0;
+}
+
+#metrics-correlate.active,
+#charts-view.mc-mode #metrics-correlate {
+  background: rgba(52, 211, 153, 0.18);
+  color: var(--text-primary);
+}
+
+.metric-canvas-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.metric-highlight-band {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: rgba(52, 211, 153, 0.16);
+  border-left: 1px solid rgba(52, 211, 153, 0.55);
+  border-right: 1px solid rgba(52, 211, 153, 0.55);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.metric-highlight-band.hidden {
+  display: none;
+}
+
+.metric-weight-chip {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  z-index: 3;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: rgba(52, 211, 153, 0.22);
+  color: var(--text-primary);
+  pointer-events: none;
+}
+
+.metric-weight-chip.hidden {
+  display: none;
+}
+
+.metric-card canvas.brushing {
+  cursor: col-resize;
+}
+
+#charts-view.mc-mode .metric-card canvas {
+  cursor: col-resize;
+}
+
+.mc-results-panel {
+  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
+}
+
+.anomaly-actions {
+  display: inline-flex;
+  gap: 8px;
+  margin-left: 8px;
+}
+
 .related-panel {
   margin-bottom: var(--space);
   padding: 12px 14px;
@@ -1463,6 +1549,7 @@ button.metrics-tf.thin-history:not(.active) {
   letter-spacing: 0.04em;
 }
 
+.metric-canvas-wrap canvas,
 .metric-card canvas {
   width: 100%;
   height: 148px;