/* ---------------- Built-in sub-pane controls (subpanes.js) ----------------
   Resize grip, close button, the ƒx panel's CHART PANES toggles,
   and the top bar's RSI / MACD / VOLUME toggle buttons for the
   built-in VOLUME / MACD / RSI panes. Chrome is subtle until
   hover, matching the pane-label styling; regular weight
   everywhere (no bold). */

/* top-bar pane toggles — static group in index.html beside the
   indicator buttons, wired by subpanes.js. Base look comes from
   .ind-btn (styles.css); .on is the filled-green active pairing
   the platform uses for live toggles (.tf.active / .view-tab.active). */
.sp-topbtns{display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;}
.sp-top-btn{padding:3px 5px; letter-spacing:.4px;}
.sp-top-btn.on{background:var(--green); color:#03140a; border-color:var(--green);
  box-shadow:0 0 14px rgba(30,227,8,.45);}

/* drag grip on the pane's top edge — a thin full-width strip with
   a centered pill; invisible until the pane is hovered */
.sp-handle{
  position:absolute; top:0; left:0; right:0; height:7px; z-index:7;
  cursor:ns-resize; touch-action:none; opacity:0; transition:opacity .15s;
}
.sp-handle::after{
  content:''; position:absolute; left:50%; top:2px; width:44px; height:3px;
  margin-left:-22px; border-radius:2px; background:rgba(143,168,196,.55);
}
.pane-sub:hover .sp-handle, .sp-handle.sp-active{opacity:1;}
body.sp-dragging, body.sp-dragging *{cursor:ns-resize !important;}

/* close button — top-right of the pane, dim until hover */
.sp-close{
  position:absolute; top:2px; right:6px; z-index:8;
  background:transparent; border:none; color:var(--dim);
  font-size:11px; font-weight:400; line-height:1; padding:2px 5px;
  cursor:pointer; font-family:inherit; opacity:.35; transition:opacity .15s;
}
.pane-sub:hover .sp-close{opacity:.85;}
.sp-close:hover{color:var(--red); opacity:1;}

/* CHART PANES rows in the ƒx panel (rows reuse .ind-active-row /
   .ind-active-name from styles.css) */
.sp-toggle{
  background:transparent; border:1px solid #1d2c42; border-radius:6px;
  font-size:11px; font-weight:400; padding:3px 9px; cursor:pointer;
  font-family:inherit; letter-spacing:.8px; min-width:46px;
}
.sp-toggle.on{color:var(--green); border-color:rgba(30,227,8,.5);}
.sp-toggle.off{color:var(--dim);}
.sp-toggle:hover{border-color:rgba(30,227,8,.65); color:#fff;}
.sp-toggle.off:hover{color:var(--dim); border-color:#1d2c42;}