feat: graph header on gain panel

src/components/Button/Button.css

@@ -2,23 +2,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
   box-sizing: border-box;
 
   min-height: var(--card-control-height);
-
   padding: 0 var(--space-4);
 
   border: var(--border-width) solid transparent;
   border-radius: var(--radius-sm);
 
   font-family: var(--font-ui);
-  font-size: var(--font-md);
+  font-size: 13px;
   font-weight: var(--font-weight-medium);
 
   cursor: pointer;
-
-  font-size: 13px;
 }
 
 .btn:disabled {
@@ -26,27 +22,49 @@
   cursor: not-allowed;
 }
 
+/* ------------------------------------------------------------------ */
+/* Variants                                                           */
+/* ------------------------------------------------------------------ */
+
 .btn-primary {
   background: var(--accent-brand);
   color: var(--bg-void);
 }
 
+/* Ghost + Toggle */
 .btn-ghost,
-.btn-toggle,
-.btn-outline {
+.btn-toggle {
   background: transparent;
   border-color: var(--border-hairline);
   color: var(--text-muted);
 }
 
+/* Outline */
+.btn-outline {
+  background: transparent;
+  border-color: var(--accent-brand);
+  color: #fff;
+}
+
+/* ------------------------------------------------------------------ */
+/* Hover                                                              */
+/* ------------------------------------------------------------------ */
+
 .btn-ghost:hover:not(:disabled),
-.btn-toggle:hover:not(:disabled),
-.btn-outline:hover:not(:disabled) {
+.btn-toggle:hover:not(:disabled) {
   background: var(--bg-raised);
   color: var(--text-primary);
 }
 
-/* Active toggle states */
+.btn-outline:hover:not(:disabled) {
+  border-color: var(--accent-brand);
+  color: var(--text-muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* Active toggle states                                                */
+/* ------------------------------------------------------------------ */
+
 .btn-toggle.active-info {
   background: var(--accent-brand);
   border-color: var(--accent-brand);
@@ -65,7 +83,10 @@
   color: var(--bg-void);
 }
 
-/* Optional: active state hover */
+/* ------------------------------------------------------------------ */
+/* Active toggle hover                                                 */
+/* ------------------------------------------------------------------ */
+
 .btn-toggle.active-info:hover:not(:disabled) {
   background: var(--accent-brand);
   border-color: var(--accent-brand);

src/components/ChannelGroup/ChannelGroup.css

@@ -1,18 +1,21 @@
 .channel-group {
   position: relative;
-  /* flex: 1 1 0; */
-  min-height: 0;
 
+  flex: 0 0 auto;
+  width: fit-content;
+  min-width: 0;
+
+  min-height: 0;
   display: flex;
 
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-md);
-
   padding: 6cqh var(--space-3) 1cqh;
   margin-bottom: 1cqh;
   margin-top: 1cqh;
+
   box-sizing: border-box;
-  overflow: visible; /* in case something upstream set hidden */
+  overflow: visible;
 }
 
 .channel-group__label {
@@ -36,6 +39,9 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
+
+  width: fit-content;
   height: 100%;
+
   gap: var(--space-1);
 }

src/components/ChoiceStepper/ChoiceStepper.css

@@ -34,7 +34,7 @@
 }
 
 .choice-stepper__input:focus {
-  outline: none;  
+  outline: none;
 }
 
 .choice-stepper__arrows {