/* Trigger UI shared by the Kaleidoscope and Revulet Beats (js/trigger-ui.js).
   Inherits --text, --text-dim, --panel-border from the host page. */
.trig-canvas {
  display: block; width: 100%; height: 132px;
  border-radius: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--panel-border);
  touch-action: none; cursor: ew-resize;
  margin-bottom: 6px;
}
.trig-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
  padding: 6px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}
.trig-row.off { opacity: 0.5; }
#panel label.trig-name { margin: 0; font-size: 12px; }
.trig-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.trig-range { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.trig-ctls { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
#panel label.trig-ctl { display: flex; align-items: center; gap: 5px; margin: 0; flex: 1; font-size: 11px; color: var(--text-dim); }
.trig-ctl input[type="range"] { margin: 0; height: 16px; flex: 1; min-width: 0; }
.trig-solo {
  background: none; border: 1px solid var(--panel-border); color: var(--text-dim);
  border-radius: 5px; font-size: 10px; padding: 2px 7px; cursor: pointer; flex: none;
}
.trig-solo.active { background: rgba(240,192,96,0.22); color: #f0c060; border-color: #f0c060; }