/* controls shared by the scope pages */
.volume {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: 12px; color: #bbb;
}
.volume input[type="range"] {
  width: 110px; vertical-align: middle; accent-color: #6ab0ff;
}
.volume .num {
  display: inline-block; min-width: 3em; text-align: right;
  color: #fff; font-variant-numeric: tabular-nums;
}
.volume .boost-warn {
  color: #f80; font-weight: bold; cursor: help;
  visibility: hidden;
}
.volume.boosted .boost-warn { visibility: visible; }

.timebase {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: 12px; color: #bbb;
}
.timebase input[type="range"] {
  width: 130px; vertical-align: middle; accent-color: #6ab0ff;
}
.timebase .num {
  display: inline-block; min-width: 4em; text-align: right;
  color: #fff; font-variant-numeric: tabular-nums;
}

.filter-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35em 1.2em;
  font-size: 12px; color: #bbb;
  padding: 4px 6px;
  background: #1a1a1a; border: 1px solid #333; border-radius: 3px;
}
.filter-row label { display: inline-flex; align-items: center; gap: .35em; cursor: pointer; }
.filter-row input[type="range"] {
  width: 100px; vertical-align: middle; accent-color: #6ab0ff;
}
.filter-row .sep { color: #444; }
.filter-row .apply-label { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.filter-row .num {
  display: inline-block; min-width: 1.6em; text-align: right;
  color: #fff; font-variant-numeric: tabular-nums;
}
.filter-row.disabled .sub-control { opacity: .45; }
.filter-row.disabled .sub-control input { pointer-events: none; }